javascript - 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 中声明的整体动画长。

1 秒与 0.5 秒

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

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