Join Michael Sullivan for an in-depth discussion in this video Using CSS transitions, part of Learning Vue.js.
- [Instructor] Next we'll take a look at CSS transitions.…These are mostly a concern of CSS,…but Vue can help us apply the transitions…at the right times, such as when elements are added,…or removed from the DOM.…To help demonstrate, I've added a link…under this summary section to allow a user…to toggle its display.…So you can see here, I've added a data property…called showSummary, initialized to true,…and then up here, I've added it…as an additional check on the v-if.…
It can be changed from true to false…and back again when this link is clicked.…But this happens instantly, and if I wanted…to show a more gradual transition…between those two states with some movement,…it would be pretty tricky to do it with CSS alone…and also make sure the styles are applied…at the right times.…With Vue, all we have to do is define…the v dash CSS classes that you see named here.…We typically won't even use all of these classes.…
For example, v-leave defines the starting state…when it's about to go from visible to hidden.…In this case, that's just the default,…
Author
Released
10/19/2018- 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
Duration
Views
Related Courses
-
Web Programming Foundations
with Morten Rand-Hendriksen58m 44s Beginner -
JavaScript: Functions
with Ray Villalobos1h 25m Intermediate -
JavaScript: Events
with Ray Villalobos2h 11m Intermediate
-
Introduction
-
What you should know1m 29s
-
1. The Simplest Form
-
Adding Vue to a webpage3m 39s
-
Understanding execution flow3m 13s
-
A Bootstrap detour2m 20s
-
2. Essential Directives, Options, and Tools
-
Loading data asynchrounously5m 17s
-
Rendering lists with v-for5m 33s
-
Using computed properties6m 43s
-
3. Enhancing User Interfaces
-
Using CSS transitions4m 54s
-
Using CSS animations3m 50s
-
4. Vue Components
-
Using Vue components3m 49s
-
Adding component props4m 38s
-
Installing Vue CLI3m 57s
-
Vue CLI project template3m 25s
-
Building for production1m 47s
-
-
Conclusion
-
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.
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: Using CSS transitions