Introduction to transitions and animations

Bo Andersen
A free video tutorial from Bo Andersen
Lead Developer
4.6 instructor rating • 5 courses • 80,075 students

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 to be effective and how to show or hide elements of the show director. 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 slices using third party scissors animation libraries using javascript or using third party javascript animation libraries as you can tell. You provide quite a bit of flexibility in terms of transitions and animations poster. We have a development with the V.F. directive 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 DOM later on. De-evolution might change to false once again causing the element to be removed from the DOM. Both times the elements 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 to be effective in this example but I could also have used to be shoat character for instance when adding transitions in view just there's a small difference between transitioning single elements or multiple elements will begin by adding transitions to a single element and then for insertion 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 C is a property transition 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 C S 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 set 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.