Auto-animate lists with Vue 3
Published over 2 years ago
When you re-render a list in Vue after adding, removing, or sorting items, the instant update always feels a little janky. The @formkit/auto-animate library is a fantastic tool that animates those list changes, creating a beautifully smooth UX.
The library used to only offer a v-auto-animate directive, so I PR-ed a useAutoAnimate composable, which I use in a lot of projects (including the filterable list of blog posts on the left).
I also made a video about why and how I made this composable, and why I generally think it's a good idea to replace as many directives as possible with function ref composables.
You can watch that video below, and I embedded the video's source code below too.
And to learn way more about function ref composables, take a look at Rethinking Reusability in Vue, my 150+ page book on Vue 3 best practices. Use code ALEXBLOG at checkout for $10 off!
