This is my first post, so thanks very much for all your help, please let me know how I can improve my question! I’m learning all of Hotwire/Stimulus new after years of Rails (and various js frameworks I’d like to move away from). I know Rails inside out.
So I seem to be having some difficulty animating content coming in from a turbostream but not animating it on page render.
I have an index of content and each item in the list can get updated with content via a turbo stream.
If I use animate.css and put the class
animate__slideInRight each element gets animated when it gets set to the page via an append, which is the correct behaviour.
However I’m having an issue where on page load all of the content also gets rendered with
animate__slideInRight and I do not want that.
In order to fix this issue I have detected in the controller if the request is the first page html load or a turbostream, and set an attr_accessor on the model to flag if the class should be present on page load or in the turbostream.
I feel as though this should be doable in js, so I was wondering how do I hook into new incoming content to add the animate-in class when the new content arrives via a turbostream.
So far I have hooked into
event.target.action === "append" and have the new
targetFrames content but it is already appened before I can add the animation class.