Javascript 平滑状态交替反转不设置动画

Javascript 平滑状态交替反转不设置动画,javascript,jquery,css,css-animations,smoothstate.js,Javascript,Jquery,Css,Css Animations,Smoothstate.js,我正在使用这个插件,但是现在我被困在反转那些让我发疯的动画上 我现在已经试了很多次了,真的搞不懂发生了什么事 开始的动画作品完美,代码我到目前为止 <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-elem

我正在使用这个插件,但是现在我被困在反转那些让我发疯的动画上

我现在已经试了很多次了,真的搞不懂发生了什么事

开始的动画作品完美,代码我到目前为止

<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>
咖啡脚本

$ ->
  '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.restartssanimations()函数等等


动画将停止,并在退出(开发人员站点)前闪烁。

您不一定需要使用反转。您可以使用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;
}
.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;
}