在fullpage.js中淡入淡出过渡 [英] Fade transition in fullpage.js
本文介绍了在fullpage.js中淡入淡出过渡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用整页制作个人网站，如何替换淡入淡出过渡而不是滑动效果以切换到部分?
I want to use fullpage for makeing pesonal site.How can i replace fade transition instead of slide effect for changing between to section?
Fullpage.js演示: http://alvarotrigo.com/fullPage
Fullpage.js demo: http://alvarotrigo.com/fullPage
推荐答案
您必须使用低于CSS的值覆盖整页过渡， 让我知道是否可行
you have to override the fullpage transitions with below css, Let me know if works
.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，例如
Update
To add a callback to your css transition you have to bind an event to parent section like
$("yourSection").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function(e) {
// code to execute after transition ends
});
这篇关于在fullpage.js中淡入淡出过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
