Introduction to transitions and animations

A free video tutorial from Bo Andersen
Lead Developer
Rating: 4.5 out of 5Instructor rating
5 courses
120,660 students
Introduction to transitions and animations

Lecture description

Before getting started with looking at how to use transitions and animations, let's first introduce what the difference is between the two.

Learn more from the full course

Vue JS 2: From Beginner to Professional (includes Vuex)

Learn Vue JS, and become a VueJS professional. Build complex SPAs with Vue.js, a simple and popular JavaScript framework

15:17:22 of on-demand video • Updated November 2019

How to build advanced Vue.js applications
How to build single page applications (SPA)
Understand the theory and how Vue works under the hood
How to manage state in large applications with Vuex
Communicating with servers with HTTP
Use modern tools for developing and building applications (e.g. webpack)
English [Auto]
We have previously seen how we can add or remove elements with the VAT directive and how to show or hide elements of the Visio directive. We have also seen how to work with dynamic components, all of these are examples of what can be animated. That is when items are inserted, updated or removed from the DOM. This can be done in a variety of ways, including using scissors classes, using third party scissors, animation libraries, using JavaScript or using third party JavaScript animation libraries, as you can tell you, provides quite a bit of flexibility in terms of transitions and animations. Suppose that we have a development with the VFT directive, the directives expression initially evaluates to false, but at some point in time this changes to true. When this happens, the element is added to the dome later on, the evaluation might change to force once again, causing the element to be removed from the dome. Both times the element is added or removed instantly, meaning that it suddenly either appears or disappears from the page. Maybe this is what we want, but perhaps we want to make it prettier by applying a transition between the states. The simplest example would be to fade the element in and out, and that's what will begin implementing soon. I just used to be a directive in this example, but I could also have used to be show directive, for instance. When adding transitions in view, yes, there is a small difference between transitioning single elements or multiple elements will begin by adding transitions to a single element and then transition multiple elements afterwards. Before diving into it, I just want to take a short moment to explain the difference between transitions and animations, a transition is an effect which transitions a value from one state to another. An example could be a phased in transition where the capacity is property is transition from zero to one so that a given element gradually appears. And animation, on the other hand, allows for more complex effects because they are not limited to changing the state from A to B. Instead, they allow for you to specify multiple states along the way. If you are familiar with Sears's keyframes, then you will know that you can specify what the state of an animation should be at a given completion percentage of the animation. So you could specify the state at 50 percent and 75 percent apart from the initial and ending states. This gives you greater control over the effect and allows you to do more complicated things. Animations can behave the same way as transitions, i.e. going from A to B, but transitions cannot be used if you need multiple steps, as you can do with animations. That being said, transitions can still be used to do great things, so while animations are more powerful than transitions, they are similar in some ways. So you might hear me use the two terms interchangeably throughout this section when it's not important if I'm referring to an animation or transition specifically. So without further ado, let's see how we can transition single elements.