How to apply transition effect on flex-item's position? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

How to apply transition effect on flex-item's position?

I have a flex container which you can add and remove items. What I want to do is, instead of all other items inside the flex simply instantly snap into their new position after an item is removed, I want this change to be animated, with the items slowly moving into their new positions. How can I achieve that? [Example Code]: https://code.sololearn.com/W4DuAf0hF6Td/?ref=app

20th Dec 2020, 4:14 PM
Erick Ruh Cardozo
Erick Ruh Cardozo - avatar
1 Answer
+ 1
You have to create an animation to the width of itemContainer (to 0px) before you deleted. ( just add another eventlistener "animationend" to itemContainer, then check if the itemContainer width is equal to 0 (use itemContainer.offsetWidth) then remove it.. )
24th Dec 2020, 7:29 PM
zak00aria
zak00aria - avatar