出口动画只有在进行启动动画的情况下才能起作用

Question

我遇到了一个问题，在此问题中，只有在开始动画仍在进行中，该动画才会退出。一旦开始动画完成，我单击另一个链接，它仍然会添加反向类，但仅显示一个白页，动画将不会退出。

这是平滑的呼叫：

$(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，则将启动出口动画。