turbolinks-animate
turbolinks-animate copied to clipboard
Back-button-click animation
Similar to inline animations. Specify a specific animation for when a user clicks on the back button.
I'd love to see this feature. Any thoughts on how this could be done?
A little hacky
let goingBack = false;
document.addEventListener('turbolinks:load', function (event) {
if (goingBack) {
window.TurbolinksAnimate.init({animation: 'fadeOutRight'});
goingBack = false;
} else {
window.TurbolinksAnimate.init({animation: 'fadeIn'});
}
});
window.onpopstate = function () {
goingBack = true;
};
Popstate fires before the load event.
@snellingio your take on this looks good, but we have to think about an interface (maybe similar to inline animations) that allows you to specify the desired back-animation in HTML or JS.
Well, actually after playing with it more, onpopstate
triggers on both backwards and forwards interactions.
Will investigate how to determine backwards / forwards either later tonight or this weekend. On quick review, it might be slightly tricky as turbolinks is overwriting the history