Question

我在wordpress项目中使用smoothState.js进行页面转换。要构建与here类似的转换，必须同时查看新旧内容。根据提供的解决方案here，我必须克隆当前的smoothstate容器。

就像this answer一样，我遇到了同样的问题，因为内容重叠。例如：如果我从Page1导航到Page2，则Page1的克隆不会淡出但仍然可见。如果我然后导航到Page3，则立即删除Page1中的克隆（在animate.scrollTop之前）。但是在Page3上还有Page2的克隆可见，等等。

作者认为选择错误是这种行为的原因，但我不知道我做错了什么。

这是我的html结构：

<body <?php body_class(); ?>>
    <div id="main1" class="m-scene">
        <!-- Navigation links here -->
        <div class="sceneElement">
            <!-- Here is my content -->
        </div> <!-- end sceneElement -->
    </div> <!-- end #main1 -->
</body>

这是我的.js

jQuery(function(){
    'use strict';
    jQuery(document).ready(function () {
        var $ = 'jQuery',
            $body = jQuery('body'),
            $main = jQuery('#main1'),
            $site = jQuery('html, body'),
            smoothState;
        smoothState = $main.smoothState ({
                debug: true,
                prefetch: true,
                cacheLength: 10,
                onStart: {
                    duration: 400,
                    render: function ($container) {
                        jQuery('#tempWrapper').remove(); // If we have the temp wrapper, kill it now.
                        $site.animate({ scrollTop: "0px" });

                        // Make a duplicate container for animation
                        var $newContainer = $container.clone();
                        $newContainer.attr("id", "tempWrapper");
                        $newContainer.css({position:'absolute', top:$container.offset().top, width:$container.css("width")});
                        $container.css({height:$container.css("height")});
                        $container.empty(); // Empty the old content so that it takes up 0 space
                        $container.before($newContainer); // Immediately add the duplicate back on
                        jQuery('.sceneElement').removeClass('sceneElement--fadeinright'); // Just in case we have the class still
                        var element = jQuery('#temWrapper', $newContainer);
                        setTimeout(callAnimation(element, true), 0); // Start the animation
                    }
                },
                onReady: {
                    duration: 0,
                    render: function ($container, $newContent) {
                        // Inject the new content
                        $container.html($newContent);

                        // do animations
                        var element = document.getElementById($container[0].id).getElementsByClassName('sceneElement')[0];
                        callAnimation(element);
                    }
                },
                onAfter: function ($container) {

                },
        }).data('smoothState');
    });


}(jQuery));

function callAnimation(element, exiting) {
    if (!exiting) {
        jQuery(element).addClass("sceneElement--fadeinright");
    } else {
        jQuery(element).addClass('is-exiting');
    }
}

这是.css

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.m-scene .sceneElement {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; 
}

.m-scene .sceneElement--fadeinright {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; 
}

.m-scene.is-exiting .sceneElement {
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse; 
}

Smoothstate：同时显示新旧内容以实现流畅的页面转换

0 个答案: