退出动画只有在开始动画正在进行时才有效

Question

我有这个问题，只有当开始动画仍在进行时动画才会退出。一旦开始动画结束，我点击另一个 link 它仍然添加反向 class 但只显示一个白页并且动画不会退出。

这是 smoothstate 调用：

$(function(){
    'use-strict';
    var options = {
        anchors: 'a',
        prefetch: true,
        blacklist: '.no-smoothState',
        debug: true,
        cacheLength: 2,
        onStart: {
            duration: 1000,
            render: function($container) {
                $container.addClass('is-exiting');
                smoothState.restartCSSAnimations();
            }
        },
        onReady: {
            duration: 1000,
            render: function($container, $newContent) {
                $container.removeClass('is-exiting');
                $container.html($newContent);
            }
        },
        onAfter: function($container, $newContent) {

        }           
    },
    smoothState = $('#wrapper').smoothState(options).data('smoothState');
    });

HTML：

<div id="wrapper"> 
    <div id="portfolio" class="portfolio"> 
        <header>...</header>

        <main id="content">
            <section>
                <h2>...</h2>
            </section>
        </main>             
    </div>
</div><!-- // wrapper -->

CSS：

#wrapper #content {
    animation-duration: 1s;
    transition-timing-function: ease;
    animation-fill-mode: forwards;
}

#wrapper #content {
    animation-name: fadeInUp;
}

#wrapper.is-exiting #content {
    animation-direction: alternate-reverse;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

Answer 1

开始使用了。如果在定位动画时使用类而不是 ID，它将启动退出动画。

退出动画只有在开始动画正在进行时才有效

exit animation will only work if start animation is in progress

smoothstate.js