javascript - FullPage.js 在桌面上的淡入淡出效果，禁用并在较小的设备上获得默认滚动

Question

我正在使用 SliceJack FullPage.js fade effect code snippet (第一个)在我的网站上获得过渡效果，效果非常好，我对桌面上的效果很满意(将它们放入我的主 CSS 中)。

我想禁用 Ipad 和移动设备等较小设备上的效果，这样我就可以默认(正常)滚动而无需过渡。

我禁用效果的唯一选择是删除代码片段(第一个)，但我也会在桌面上失去这些效果。

我在 jQuery.fullPage.js 脚本中启用了 976 像素的响应宽度。

是否可以在移动设备和 iPad 上清空我在 CSS(用于过渡)中添加的那 3 个类？

/*Fade in effect & one pager*/
.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;
}
/* Remove transition when website is still loading */
body {display:none}
body[class*="fp-viewing-"] {display:block}

Answer 1

如果您正在使用 fullPage.js和 fadingEffect extension , 然后你可以使用 fullPage.js 回调和函数以正确的方式解决这个问题:

$('#fullpage').fullPage({
    responsiveWidth: 976,
    afterResponsive: function(isResponsive){
        if(isResponsive){
            $.fn.fullpage.fadingEffect.turnOff();
        }
        else{
            $.fn.fullpage.fadingEffect.turnOn();
        }
    }
});