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

Я использую smoothstate.js, чтобы добавить простой переход к элементу при загрузке страницы. Я добавил анимацию, когда новая страница загружается, но когда вы нажимаете назад, анимация не переворачивается, она просто переходит на предыдущую страницу. Он не добавляет класс "is-существующие" в контейнер, как следует. Продолжительность анимации в js и css также совпадает. В любом случае анимация элемента запускается при загрузке страницы, поэтому трудно сказать, срабатывает ли smoothstate.js вообще.

HTML

<div id="smoothwrap" class="page-transition">
     <!--content-->       
</div>

CSS

@keyframes fadeIn {
    0% {
        opacity: 0;
        position: relative;
        top: 20px;
    }

    100% {
        opacity: 1;
        top: 0px;
    }
}

.page-transition {
    animation-duration: .6s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;
    animation-name: fadeIn;
 }

.is-exiting{
   animation-direction: alternate-reverse;
}

JS

$(function(){
  'use strict';
   var options = {
   prefetch: true,
   cacheLength: 2,
   onStart: {
      duration: 600, // Duration of our animation
      render: function ($container) {
      // Add your CSS animation reversing class
      $container.addClass('is-exiting');

    // Restart your animation
    smoothState.restartCSSAnimations();
  }
},
onReady: {
  duration: 600,
  render: function ($container, $newContent) {
    // Remove your CSS animation reversing class
    $container.removeClass('is-exiting');

    // Inject the new content
    $container.html($newContent);

  }
}
},
 smoothState = $('#smoothwrap').smoothState(options).data('smoothState');
});

0 ответов

Другие вопросы по тегам