Smoothstate.js . Исчезающая обратная анимация не запускается

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.