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函数的代码非常重要。

它只重新启动绑定到主容器对象的动画。在我的情况下，我对没有射击的孩子进行了动画制作。

我的解决方案是添加一个＆＃39;反向＆＃39;类到需要反向动画的任何元素。在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中为持续时间键/值对设置的时间相同。

Smoothstate.js .is-退出反向动画而不是

3 个答案: