Introduction to transitions and animations

We have previously seen how we can add or remove elements with the directive and how to show or hide elements with the show 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 CSS classes, using third party CSS, animation libraries, using JavaScript or using third party JavaScript animation libraries. As you can tell, Vue provides quite a bit of flexibility in terms of transitions and animations. Suppose that we have a div element with the directive. The directive's expression initially evaluates to false, but at some point in time this changes to true. When this happens, the element is added to the Dom. Later on, the evaluation might change to false once again, causing the element to be removed from the Dom. 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 we'll begin implementing soon. I just used the directive in this example, but I could also have used the V show directive, for instance. When adding transitions in Vue.js, there is a small difference between transitioning single elements or multiple elements. We'll 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 fade in transition where the opacity CSS property is transitioned from 0 to 1 so that a given element gradually appears. An 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 CSS 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% and 75%. 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.