Join Joe Chellman for an in-depth discussion in this video Animating with transition-group, part of Vue.js for Web Designers.
- [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 component…is transition group, like this.…
Author
Released
1/31/2019- Installing Vue.js and Vue devtools
- Creating interactive components
- Adding data to components
- Listening for events
- Scaffolding components
- Building and wiring forms
- Animating transitions
- Incorporating live data via REST APIs
- Adding third-party Vue components
Skill Level Beginner
Duration
Views
Related Courses
-
Vue.js: Building an Interface
with Ray Villalobos2h 19m Intermediate -
JavaScript for Web Designers
with Joe Chellman2h 43m Beginner -
Learning JavaScript Debugging
with Joe Chellman2h 6m Intermediate
-
Introduction
-
1. Introducing Vue
-
Vue concepts and jargon3m 44s
-
Vue tools3m 2s
-
Installing the Vue devtools3m 20s
-
2. First Project: Customizer
-
Adding data to our component3m 52s
-
3. Second Project: Directory Browser
-
Make a plan2m 26s
-
Scaffold initial components5m 18s
-
Build the filters form5m 13s
-
Handle custom filter event3m 29s
-
-
4. Third Project: Status Updater
-
Inspecting our starting code3m 40s
-
Conclusion
-
Next steps1m 27s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Animating with transition-group