jquery - Smoothstate.js .is-exiting 反向动画未触发

Question

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

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

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

请看这个 fiddle : 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');