退出时无过渡或动画(smoothstate.js)

Question

我正在使用smoothstate.js进行页面转换，当我单击链接转到另一个页面时，我在尝试退出动画时遇到了问题。当页面加载时，我没有问题，因为动画启动正常。如果只退出，页面将正常退出，不会有任何过渡或动画。下面是我一直在编写的代码

Index.html

<div class="container_12 ">
    <header class="grid_12 scene_element scene_element--fadein">
        <nav class="">
            <ul>
                <li><a href="page.html">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Works</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </header>
</div>

About.html

<div class="container_12 ">
    <header class="grid_12 scene_element scene_element--fadein">
        <nav class="">
            <ul>
                <li><a href="index.html">Lorem</a></li>
                <li><a href="#">Ipsum</a></li>
                <li><a href="#">Sit</a></li>
                <li><a href="#">Dolor</a></li>
            </ul>
        </nav>
    </header>
</div>

<div class="container_12">
    <div class="grid_12 main-page scene_element scene_element--fadeinup">
       Main Page
    </div>
</div>

CSS

.scene_element {
    -moz-animation-duration: 1s;
    -moz-transition-timing-function: ease-in;
    -moz-animation-fill-mode: both;

    -webkit-animation-duration: 1s;
    -webkit-transition-timing-function: ease-in;
    -webkit-animation-fill-mode: both;

    animation-duration: 1s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;
}

.scene_element--fadein {
    -moz-animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.scene_element--fadeinup{
    -moz-animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.scene_element--fadeinright{
    -moz-animation-name: fadeInRight;
    -webkit-animation-name: fadeInRight;
    animation-name:fadeInRight;
}


.m-scence.is-exiting .scene_element {
     animation-direction: alternate-reverse;
}

JS

(function ($) {
'use strict';
var $body    = $('html, body'),
    content  = $('#main').smoothState({
        prefetch: true,
        pageCacheSize: 20,
        onStart: {
            duration: 200,
            render: function (url, $container) {
                content.toggleAnimationClass('is-exiting');
                $body.animate({
                    scrollTop: 0
                });
            }
        },

        onProgress : {
            duration: 0, // Duration of the animations, if any.
            render: function (url, $container) {
            $('container').addClass('hide')
            }
        },

        onEnd: {
            duration: 0,
            render: function (url, $container, $content) {
                $body.css('cursor', 'auto');
                $body.find('a').css('cursor', 'auto');
                $container.html($content);
                content.toggleAnimationClass('hide');
            }

        }


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

Answer 1

您的CSS动画时长为1s，Js中声明的动画时长为0.2s

这是CSS

.scene_element {
-moz-animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;

下面是Javascript

onStart: {
        duration: 200,
        render: function (url, $container) {