Smoothstate.js .is-退出反转动画不触发

Question

我知道这个问题在很多地方都被问过，但我还没有找到一个适合我的情况的答案。

我使用smoothstate.js在页面加载时触发一系列动画，并(希望)在页面退出时反转动画。

在页面加载上效果很好，但在反转时就没有运气了。滚动到顶部似乎也不起作用。

请看这个小提琴：https://jsfiddle.net/bridget_kilgallon/jxh2urgg/

JS：

;(function ($) {
  'use strict';
  var content  = $('#main').smoothState({
        // onStart runs as soon as link has been activated
        onStart : {

          // Set the duration of our animation
          duration: 250,

          // Alterations to the page
          render: function () {

            // Quickly toggles a class and restarts css animations
            content.toggleAnimationClass('is-exiting');
          }
        }
      }).data('smoothState'); // makes public methods available
})(jQuery);

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

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

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

SCSS：

/** Reverse "exit" animations */
.m-scene.is-exiting {
    .scene-element {
      animation-direction: alternate-reverse;
      -webkit-animation-direction: alternate-reverse;
      -moz-animation-direction: alternate-reverse;
    }
}

Answer 1

toggleAnimationClass()已被弃用。改为使用restartCSSAnimations()，并在适当的回调上添加或删除动画类。

例如：

var smoothState = $page.smoothState({
    onStart: {
      duration: 250,
      render: function (url, $container) {
        // Add your CSS animation reversing class
        $page.addClass('is-exiting');

        // Restart your animation
        smoothState.restartCSSAnimations();

        // anything else
      }
    },
    onEnd: {
      duration: 0,
      render: function (url, $container, $content) {
        // Remove your CSS animation reversing class
        $page.removeClass('is-exiting');

        // Inject the new content
        $container.html($content);
      }
    }
  }).data('smoothState');

Answer 2

遇到了同样的问题。阅读restartCSSAnimations函数的代码很重要。

它只重新启动绑定到主容器对象的动画。在我的例子中，我有关于孩子的动画，但没有触发。

我的解决方案是向任何需要反向动画的元素添加一个'pt- reverse‘类。然后，我在onStart中添加了以下内容，而不是restartCSSAnimations：

els = $('.pt-reverse');
$.each(els,function(ix,el) {
    var animation = $(el).css('animation-name');
    $(el).css('animation-name','none');
    $(el).height();
    $(el).css('animation-name',animation);
});

// smoothState.restartCSSAnimations();

这基本上做了restartCSSAnimations所做的事情，只是更多地针对特定元素。

现在它运行得很顺利。

Answer 3

检查动画的持续时间，并确保它持续的时间与您在JavaScript中为持续时间键/值对设置的时间相同。