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;
    }
}

- Bridget Kilgallon

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');

- Miguel Ángel Pérez

---

嗨，这个不起作用，我的#main根本没有得到.is-exiting，有什么想法吗？我已经放置了jquery.min.js，在all.js上放置了此函数，有2个包含#main和.m-scene的页面| 我做了我知道我应该做的一切（就我所知）- 但仍然没有给出.is-exiting。 - Budi Tanrim

$page 应该改成 $container 吗？ - Kristian Matthews

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基本相同，只是更加针对特定的元素。

现在它运行得更加流畅了。

- Jan Klier

---

非常感谢。这让我抓狂了。 - Alireza Noori

Answer 3

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

- dapinitial