turbolinks-animate
turbolinks-animate copied to clipboard
jonhue
Specify animation for element
Hi,
First of all, thanks for this awesome library!
I'm trying to animate page changes, where a specific element needs a different appear/disappear animation than the rest of the page.
Example markup:
<body>
<div id="banner">...</div>
<section id="page">...</page>
</body>
In this example I'd want all content to fadeIn between navigation, except #banner, which should use bounceIn. It seems that this is not possible with the current options.
I've not been able to find a way to achieve easily.
I'm suggesting allowing data-turbolinks-animate-animation to be added to child elements, effectively disabling disabling the parents animation on that element (kind of like persisting at the moment), and instead applying the animation specified by the data attribute, eg:
<body data-turbolinks-animate-animation="fadeIn">
<div id="banner" data-turbolinks-animate-animation="bounceIn">...</div>
<section id="page">...</page>
</body>
What do you think?
Regarding your example, it should be possible to fadein the page section by moving the animation argument from the body element to section#page, right?
Regardless, I like your suggestion of child elements overwriting the propagated animation. Seems intuitive to me. If you have some time to spare, I'd definitely be willing to review a pull request.
