Join Michael Sullivan for an in-depth discussion in this video Using CSS animations, part of Learning Vue.js.
- [Instructor] Finally, we'll look at one more type…of visual enhancement and that's a CSS animation.…An animation is similar to a transition…except that the way Vue interacts with it…is slightly different…and we can also define multiple states of the animation…beyond just a start and end state.…To keep this simple,…I'm just gonna try to animate a single word in our title,…the word Objects.…When the page loads,…I wanna make this word appear to fly out of the screen…toward the user while spinning around…and then go back into place.…
First, I wanna make sure I can isolate that word Objects…by wrapping it in a div or a span element.…Regardless of which one I choose, we'll do span,…I wanna add style display:inline-block…so that it stays on the same line as Near-Earth…like an inline element,…but its position can be manipulated like a block element.…Next, just like with a transition,…we're gonna wrap this in a transition component…and give it a name so we'll call it spin.…
Animations like transitions are often triggered…
- 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.