平滑状态交替反转不动画

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;
  }
}

咖啡脚本

$ ->
  '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')

现在淡出动画有效（除了最初有淡入动画的元素）。

我尝试过的是更改 onStart、onEnd 等动画方向，添加删除 smoothstate.restartCSSAnimations() 函数等。

退出前动画停止闪烁消失（开发站点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;
}

平滑状态交替反转不动画

smoothstate alternate reverse not animating

javascript

css

jquery

css-animations

smoothstate.js