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动画持续时间为1秒，以Js声明的动画持续时间为0.2秒

以下是 CSS

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

以下是 Javascript

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

退出时没有转换或动画（smoothstate.js）

1 个答案: