javascript - 退出时没有过渡或动画(smoothstate.js)

Question

我正在使用 smoothstate.js 进行页面转换，但每当我单击转到另一个页面的链接时，我都无法尝试让动画退出。自动画正常启动以来，页面加载时我没有问题。仅退出时页面将正常退出，没有任何过渡或动画。这是我一直在处理的代码

索引.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) {