Animate Lists with TransitionGroup // Vue Tutorial

While Vue Transition is great for animation, TransitionGroup opens up a whole new realm of possibilities by allowing us to animate items in a list - including their addition, removal, and movement within a list.

LINKS



✅ FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS

follow me on twitter:

Music by Lukrembo

[theolavaux]

Great explanation! Don't forget that you can use the @submit.prevent modifier to prevent the default behavior of a form! This video led me to a question, what technique do you use to animate elements when for instance the content of a div changes or the src attribute of a image is modified ? Keep uploading awesome content.

[brunobueno]

PLEASE HELP!
I can find on the documentation and a lot of videos that teach animation on a list when adding or removing an item, but what im trying to get and I cant find anywhere is how do I add animation on the render of the list. I have some inputs, I press button, I fecth a list. This list is displayed on the screen. Bu the list is displayed all at once with no animation, wih makes it wuite ugly and not user friendly. I want the list to be displayes in a flow, wach item coming one after the other from top to bottom, I have searched everywhere and I cant find one example of that on vue, if someone could help me I would be very gratefull

[DesignByFaizi]

Amazig. Do transition groups work in nuxt as well?

[Troy-olfk]

Please make a video about vue 3.2 v-bind style, it's an interesting new feature

[destinyobamwonyi]

next time instead of using preventDefault to handle button tag reload just give it's attribute of type the value button ` <button type="button"> </ button> ` with this the button will just act as a simple clickable tool other than a form submitting tool.

[FrederickAlvarez_]

super, it would be cool if they had presets like vanish or something 😆

[DARKAR_]

can we use transition group without needing to replace the wrapper element?, in the example is a simple ul list, but in the case that the list needs to be rendered into a slot, how can this works?

[abhijithmohan]

This is why I am attracted to svelte, damn it

[stowx]

Hi. Can you say me you theme name of vscode?

[viktorlernt]

Nice infos, but the video is to fast and the voice not very clear.