Question

Pacient：http://demo.imatte.us/fomru/landingpage.html

问题：http://gyazo.com/031fe1c5413550e6e68aceef2740cefc

当窗口大小发生变化时，我们可以看到其他幻灯片的内容。但是在释放窗口的边框后，元素移动到正确的位置后会有很小的延迟动画。如何禁用此延迟和动画，并强制元素不断保持在正确的位置？

Answer 1

正如@flybear指出的那样，你需要为它修改插件。

您还需要使用scrollingSpeed更改插件的$.fn.fullpage.setScrollingSpeed(0)。但这只有在您使用css3:false时才有效。

您应该为此更改当前事件resize：

//when resizing the site, we adjust the heights of the sections, slimScroll...
$(window).resize(function () {
    // rebuild immediately on touch devices
    if (isTouchDevice) {
        $.fn.fullpage.reBuild();
    } else {
        $.fn.fullpage.setScrollingSpeed(0);
        $.fn.fullpage.reBuild();
        $.fn.fullpage.setScrollingSpeed(700); //default one
    }
});

如果您希望同时使用css3:true，则需要处理css3类中定义的.fp-easings动画。您可能可以创建另一个CSS类来覆盖定义.fp-easings transition秒0的{{1}}：

//when resizing the site, we adjust the heights of the sections, slimScroll...
$(window).resize(function () {
    // rebuild immediately on touch devices
    if (isTouchDevice) {
        $.fn.fullpage.reBuild();
    } else {
        $.fn.fullpage.setScrollingSpeed(0);
        $('.fp-easings').addClass('.fp-no-transitions');
        $.fn.fullpage.reBuild();
        $.fn.fullpage.setScrollingSpeed(700); //default one
        $('.fp-easings').removeClass('.fp-no-transitions');
    }
});

CSS

.fp-no-easing {
    -webkit-transition: all 0s ease-out !important; 
    transition: all 0s ease-out !important;
}

请注意，在每个调整大小事件时，当您调整浏览器窗口大小时可以触发数百次，将执行插件的reBuild功能，该功能将负责调整部分的大小，更新内部容器并滚动网站的所有部分和幻灯片以适应新的位置。

这种数百次射击可能会导致计算机速度慢，并会降低页面速度。

Fullpage.js。如何禁用规范化元素之间的延迟？

1 个答案: