Search code examples
cssvue.jsvuejs2transition

How to animate height of transition-group container in Vue

I am trying to add and remove items from list. I am able to animate the list but the container's height is not animating.

CodeSandbox

As you can see in the preview, the red container gets and lose height without transition.

How can I animate the height of the container as well when an item is added or deleted?

Regards

Solution

  • Just add CSS-attribute to your container : transition: .3s where 3s is a value of transition time & change dynamically the height of container.