Question

我遇到这个问题，如果开始动画仍在进行中，动画将只会退出。一旦开始动画结束，我点击另一个链接，它仍然添加反向类，但只显示一个白页，动画不会退出。

以下是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，则会启动退出动画。

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

1 个答案: