From the course: Vue.js 2 for Web Designers
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Animating with transition-group - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Animating with transition-group
- [Instructor] In this video, we're going to add some better visual feedback to the updating of our people list, with animation, using View's built in transition group component. If you're coming to View from React, you'll probably have used React transition group before. View has essentially the same stuff, used in a similar way, but it's built in. View's transition components let you describe what happens to a component over time, using these transitions. Usually this is going to take the form of css animation via changing classes. And that's what we're doing here, but, just so you know, these components can support other types of changes as well, should you need them. I know that sounds a little bit abstract, but, if you need it, it's there. The first step in this process is wrapping our list of items in a transition group component. So, I'm scrolling down to my directory people component and I'm going to add a transition group component around my list of items. So the name of that…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Make a plan2m 26s
-
Scaffold initial components5m 18s
-
Pass component data with props6m 4s
-
Build the filters form5m 13s
-
Wire up the filters form4m
-
Respond to filter form updates3m 7s
-
Handle custom filter event3m 29s
-
Animating with transition-group6m 28s
-
Challenge: Better usability and animation1m 30s
-
Solution: Better usability and animation1m 39s
-
-
-