jquery - Smoothstate.js .is-exiting reverse animation not firing -
i know question has been asked in various places have yet find answer works situation.
i'm using smoothstate.js fire series of animations when page loads, , (hopefully) reverse animations when page exits.
works great on page load no luck on reversing. scroll top doesn't seem working either.
please see fiddle: https://jsfiddle.net/bridget_kilgallon/jxh2urgg/
js:
;(function ($) { 'use strict'; var content = $('#main').smoothstate({ // onstart runs link has been activated onstart : { // set duration of our animation duration: 250, // alterations page render: function () { // toggles class , 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 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; } }
toggleanimationclass()
has been deprecated. use restartcssanimations()
instead, , add or remove animation classes on appropiate callbacks.
for example:
var smoothstate = $page.smoothstate({ onstart: { duration: 250, render: function (url, $container) { // add css animation reversing class $page.addclass('is-exiting'); // restart animation smoothstate.restartcssanimations(); // else } }, onend: { duration: 0, render: function (url, $container, $content) { // remove css animation reversing class $page.removeclass('is-exiting'); // inject new content $container.html($content); } } }).data('smoothstate');
Comments
Post a Comment