Join Michael Sullivan for an in-depth discussion in this video Applying transitions to lists, part of Learning Vue.js.
- [Instructor] Next, we'll add a CSS transition…for removing a row when the remove button is clicked.…It'll be similar to the last transition we set up,…but since the rows are rendered with a v4 directive,…we'll have to handle it a bit differently.…We'll also run into a little trouble…when the browser yanks our unfamiliar transition component…out of the table before Vue gets to work with it,…and I'll show you one way to get around that problem.…When using transitions with a collection developments,…for example, the table rows produced here using v4,…we need to wrap those elements…in a transition-group component,…instead of the transition component…that we used in the last video.…
The first problem with transition-group…is, unlike transition, this will actually be rendered,…and it will be rendered as a span element by default.…But we really don't want a span element…as an immediate child of tbody.…Luckily, the transition-group element…supports a tag attribute to override that.…So, as a first attempt we might try…
- Adding Vue to a webpage
- Thinking declaratively with data binding
- Methods and event handling
- Adding dynamic style and class attributes
- Using CSS transitions and animations
- Using Vue components
- Vue CLI
Skill Level Intermediate
Web Programming Foundationswith Morten Rand-Hendriksen58m 44s Beginner
What you should know1m 29s
1. The Simplest Form
2. Essential Directives, Options, and Tools
3. Enhancing User Interfaces
4. Vue Components
Next steps2m 32s
- 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.Cancel
Take 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.