Problem with toast animation (how to make old one slide back?)
I created this codepen https://codepen.io/Lko3001/pen/mdgmKaW, as you can see, when you create a few toasts, and then create a new one, the new one appears out of nowhere and most importantly, the other cards jump up and then down, instead, I want the current cards to slide back, and then add a new card, how do I do that?
1 Reply
I would move a lot more of the logic into the JavaScript.
This would make it easier to calculate the top offset and scaling with no need to manually set it for each child.
I have forked your pen to show you how I might do it.
I have used grid to stack all the "toasts" on top of each other and then scaled them down and moved them up with JavaScript as a new one is added.
I have also set it to slide the new toast in from the bottom.
For the hover event I have also reverted to JavaScript to calculate the positions, both on mouseenter and mouseleave.
The code needs optimizing (I might make some changes later) but it does work as I think you want it: https://codepen.io/cbolson/pen/YzMVdrd