smoothstate alternate reverse animating

Question

私はプラグインを使用していますが、今私は夢中になっているアニメーションの逆転に取り組んでいます。

私は本当に何が起こっているのか理解できないほど大変でした。開始アニメーションが完璧に動作し

、コードは、私は、要素を除いて（これまで

<div id="smooth" class='stage'> 

    <nav class="chronology-nav"> 
    {% if prev is not null or prev is not empty %} 
     <div class="date date-current stage-element stage-element-reveal-left"> 
     <h6><a href="{{ url('/')}}{{ prev.url }} ">{{ prev.title }}</a></h6> 
     <strong>{{prev.year}}</strong> 
     </div> 
    {% endif %} 

    {% if next is not null or next is not empty %} 
     <div class="date date-next stage-element stage-element-reveal-3d"> 
     <h6><a href="{{url('/')}}{{ next.url }}">{{next.title}}</a></h6> 
     <strong>{{next.year}}</strong> 
     </div> 
    {% endif %} 
    </nav> 
    <div class="content scroll" > 
    <article class='stage-element stage-element-reveal-bottom'> 
     <h6 class="alt"><small>Tradycja i historia <span>{{ year }}</span></small></h6> 
     <h2>{{ staticPage.title|raw }}</h2> 
     <section> 
     {{ staticPage.content|raw }} 
     </section> 
    </article> 
    </div> 
    {% if banner is not null or banner is not empty %} 
    <aside class='stage-element stage-element-fade-in' style='background-image: url({{ banner|media }})' ></aside> 
    {% endif %} 
</div> 

アニメーション

.stage-element-reveal-left{ 
    animation-name: reveal-left; 
} 
.stage-element-reveal-3d{ 
    animation-name: reveal-fade-3d; 
} 

.stage-element-reveal-bottom{ 
    animation-name: reveal; 
} 

.stage-element-fade-in{ 
    animation-name: fade-in; 
} 

.stage{ 
.stage-element{ 
    animation-duration: 2s; 
    animation-timing-duration: ease-in; 
    animation-fill-mode: both; 
    } 
    &.is-exiting .stage-element{ 
    animation:fade-in 2s 1; 
    animation-direction: reverse; 
    } 
} 

CoffeeScriptの

今

$ -> 
    'use strict' 
    options = 
    prefetch: true 
    cacheLength: 6 
    onStart: 
     duration: 2000 
     render: ($container) -> 
     $container.addClass 'is-exiting' 
     $('body').removeClass('done') 
    onProgress: 
     duration: 0 
     render: ($container) -> 
     $container.hide() 
     return 
    onReady: 
     duration: 0 
     render: ($container, $newContent) -> 
     $container.show() 
     smoothState.restartCSSAnimations() 
     $('body').addClass('done') 
     $container.html $newContent 
     $container.removeClass 'is-exiting' 
     return 
    onAfter: ($container, $newContent) -> 
     $('.scroll article').slimScroll(
     height: '70vh', 
     color: '#ebebeb' 
     ) 
    smoothState = $('#smooth').smoothState(options).data('smoothState') 

フェードアウトアニメーションの作品を持っています最初はアニメーションがフェードアウトしていました）。

私が試みたのは、smoothState.restartCSSAnimations（）関数などを削除して、onStart、onEndなどのアニメーションの方向を変更することでした。

アニメーションが停止し、終了する前に点滅します（devサイトhttp://gabinet-paluch.pl/dev/tradycja/poczatki）。

Answer 1

逆にする必要はありません。あなたはFadeInの反対側を使うことができます - FadeOutを使います。

.m-scene.banner-isloaded .scene-main--fadeInUpBig { 
    -webkit-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
} 
.m-scene.is-exiting .scene-main { 
    // -webkit-animation-direction: alternate-reverse; 
    // animation-direction: alternate-reverse; 
    -webkit-animation-name: fadeOutDown; 
    animation-name: fadeOutDown; 
}