0

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

对于 Chrome，动画是“笨拙的”，当它进入全屏时，它会等待一秒钟，直到它真正出现。请看下图：

转换发生的屏幕截图

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

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

然而，在 Safari 上，过渡是平滑的，但时不时地，当它完成时，它会闪烁......！

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

我的整页设置：

 $('#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 中的延迟是因为弹出窗口超出了缩略图，因此即使它们不在视图中，它们仍在调整它们的大小；我对此的解决方案是在弹出滑块打开时应用“显示：无”。

Safari 中的闪烁是因为 FullPage.js 改变了部分的大小和它们的“translate3d”，所以当调整发生时会有闪烁。默认的 Fullpage.js 特性是在调整时实际显示上面部分的一部分，但是由于我在 .active 部分使用 100vh，它不会在 Chrome、Opera 或 Firefox 上显示，并且只会在 Safari 中闪烁（因此我想知道闪烁是！）

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

干杯

4

0 回答 0