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

现在淡出动画可以正常工作（首先是动画淡入的元素除外）。

我尝试过的是更改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不动画

1 个答案: