Question

我创建了一个投资组合类型（基于WordPress）的网站，使用FullPage和Flexslider（作为一个绝对定位的弹出窗口），它有一个FullScreen按钮，目前正在给我一些噩梦，但只在FullPage的第二个“.section”中（它只有两个部分）。我也在FullPage文档中使用了SlimScroll.js，因为它可能比窗口更高。

对于Chrome来说，动画是“笨拙的”，当它全屏显示时，它会等待一秒钟，直到它实际发生。请参阅下图：

Screenshot of transition happening

我添加了以下代码，它适用于第一部分，但不适用于第二部分......：

html:not(.ios) .fp-section.active {
    height: 100vh !important;
}
html:not(.ios) .fp-section.active .fp-tableCell {
    height: 100vh !important;
}

在Safari上，过渡很顺利，但是，当它完成时，它会一直闪烁......！

在Firefox上，全屏淡入淡出并没有太大问题。（有没有办法将其替换为缩放型动画？

我的FullPage设置：

 $('#fullpage').fullpage({
    // Navigation
    slideNavigation: false,

    // Scrolling
    easingcss3: 'cubic-bezier(0.850, 0.000, 0.250, 1.000)', //easeInOutCirc
    scrollingSpeed: 500,
    scrollOverflow: true,

    // Design
    controlArrows: false,

    // Events
    afterLoad: function(anchorLink, index) { // after changing section
        if (index == 1){
            // Load scrollDown link so that you don't have to load it afterwards
            $('#main').load(scrollDown + ' .main-content', function(){
                $.fn.fullpage.reBuild();
            });

            // Hide menu
            if ( $( '#site-navigation' ).hasClass( 'toggled' ) ) {
                $( '#site-navigation' ).removeClass('toggled');
                $( '#site-navigation .menu-toggle').attr( 'aria-expanded', 'false' );
                $( '#site-navigation ul').attr( 'aria-expanded', 'false' );
            }
        }
        colorInversion();
        popupSlider();
    },
    afterRender: function() { // so that it applies to first section too
        colorInversion();
        popupSlider();
    },
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) { // after changing slide
        //$.fn.fullpage.reBuild();
        popupSlider();
    }
});

我的FlexSlider设置：

$('#popup-slider').flexslider({
    animation: 'slide',
    slideshow: false,
    easing: 'easeInOutExpo',
    animationSpeed: 0,
    customDirectionNav: $(".flex-direction-nav a"),

    // Usability features
    video: true,

    // Special Properties
    manualControls: '.popup-slider-link',

    // Callback API
    start: function(slider){
        $('.slides li *').click(function(event){
            event.preventDefault();
            slider.flexAnimate(slider.getTarget("next"));
        });
    },
    after: function(){ // After each slider animation completes
        flexslideColorInversion(); // Check for color inversion
        $('#popup-slider').data('flexslider').vars.animationSpeed = 500; // Put animation speed back to 500
    },
});

（Flexslider在popupslider()函数内初始化。）

有没有办法“解决”这些问题？

非常感谢能够帮助我解决这个问题的任何人。

编辑：

我已经看到Chrome中的滞后是因为弹出窗口超过了缩略图，因此即使它们不在视图中，它们仍在调整它们的大小;我的解决方案是在弹出滑块打开时应用“display：none”。

Safari中的闪烁是因为FullPage.js更改了部分的大小及其“translate3d”，因此在进行调整时会出现闪烁。默认的Fullpage.js特性是在调整时实际显示上面部分的部分，但是当我使用100vh用于.active部分时，它不显示在Chrome，Opera或Firefox上，而且只显示Safari中的闪烁（因此我想知道是什么闪烁了！）

可能唯一的方法是使用“vh”重新编码Fullpage.js的translate3d（和高度/宽度）代码，这样就不必调整大小。如果任何人有一个现成的代码，那将非常感激！（IE8不需要支持）。

干杯

使用FullScreen API在Chrome和Safari上进行跳转（或调整大小）

0 个答案: