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