I have a list of items (data collection from Xano). I want to highlight a new element in this list right after it’s been added. And I want a highlight duration to last 5 seconds.
I achieved it, but don’t think I used an optimal way for this
Now it works like this:
User adds a new element to the list through the modal
With “on mounted” workflow binded to an item I change a “legalFormHighlight” variable to “true” for a 5 seconds (time delay). And then change it back to “false”.
For a transient animation, I’d consider putting CSS to work instead of JS. THere’s good documentation about how to use CSS animations: CSS Animations | WeWeb Documentation
The cool thing is that you can apply them on the mount of theocmponent, so somethingnew coming in gets the animation (be it movement, a glow, or whatever).
Am I getting it right, that nevertheless, I still need to somehow manage setting/clearing a highlight automatically for a specific period of time?
I tried it with a variable, but a variable is taken by all repetead items as a single entity, which is the same for all. So, when even one of the items meets the highlight condition they are all highlighted which is wrong behavior for my case.
The animation can just be appplied to the element. It fires once, and then it has nothing more to do. Make the animation the default behavior on mount. No variable required.
Tried it. Works almost as I need it to, except the part that the animation fires on page load event for every item inside the repeated items list. So it highlights all the items on any data fetch.
And I want the animation to fire only for items that are considered “new” by my condition, which is that their creation date is no more than 10 seconds from the current time.
As I undestand, in order to make the animation work right I’ll need to track all the conditions when animation should or shouldn’t fire. And set for all those conditions play state “paused” or “running”. Sounds like a challenge
