smoothstate.js反转动画

Question

在smoothstate.js库中的场景元素的反向动画方面有一些问题。我在这个网站上工作：LINK

实际上，".is-exiting“类适用于DOM，但动画没有在这里发生，这是我的css：

.animated .scene_element{
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;

}

.animated.is-exiting .scene_element {
            -webkit-animation-direction: alternate-reverse;
            animation-direction: alternate-reverse; 
 }  

和jquery

;(function ($) {
  'use strict';
  var $body    = $('html, body'), // Define jQuery collection 
      content  = $('#wrapper').smoothState({
        onStart : {
          duration: 500,
          render: function () {
            content.toggleAnimationClass('is-exiting');

            // Scroll user to the top
            $body.animate({ 'scrollTop': 0 });

          }
        }
      }).data('smoothState');
})(jQuery);

Answer 1

在css中声明的动画持续时间比在javascript中声明的整个动画长。

1s vs 0.5s

.animated .scene_element{
  -webkit-animation-duration: 1s;
          animation-duration: 1s;

onStart : {
          duration: 500,
          render: function () {