fullpage.js 中的淡入淡出过渡

Question

我想使用整页来制作个人site.How我可以用淡入淡出过渡代替幻灯片效果来切换到部分吗？

Fullpage.js 演示：http://alvarotrigo.com/fullPage

Answer 1

您必须使用以下 css 覆盖整页转换，让我知道是否有效

.fullpage-wrapper {
width: 100%!important;
transform: none!important;
}

.fp-section {
width: 100%!important;
position: absolute;
left: 0;
top: 0;
visibility: hidden;
opacity: 0;
z-index: 0;
transition: all .7s ease-in-out;
}

.fp-section.active {
visibility: visible;
opacity: 1;
z-index: 1;
}

更新要向 css 转换添加回调，您必须将事件绑定到父级 section，如

$("yourSection").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
function(e) {

// code to execute after transition ends

});

fullpage.js 中的淡入淡出过渡

Fade transition in fullpage.js

jquery

fullpage.js