turbolinks-animate icon indicating copy to clipboard operation
turbolinks-animate copied to clipboard

Back-button-click animation

Open jonhue opened this issue 6 years ago • 4 comments

Similar to inline animations. Specify a specific animation for when a user clicks on the back button.

jonhue avatar Jul 07 '18 07:07 jonhue

I'd love to see this feature. Any thoughts on how this could be done?

snellingio avatar Feb 07 '19 00:02 snellingio

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 avatar Feb 07 '19 01:02 snellingio

@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.

jonhue avatar Feb 07 '19 12:02 jonhue

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

snellingio avatar Feb 07 '19 15:02 snellingio