Learning Vue

Chapter 10. Transitioning and Animation in Vue

We have explored all the crucial aspects of building a working Vue application, including handling routes and data flow with proper state management. This chapter will explore a unique Vue feature for enhancing the user experience: animation and transitions, using transition components, hooks, and CSS.

Understanding CSS Transitions and CSS Animations

CSS animations are the visual effects of a state change on a specific element or component, with no limit on the number of states. A CSS animation can start automatically and go into a loop without explicit triggering. In contrast, CSS transition is an animation that responds to a change between two states only, from average to hover for a button or from hidden to visible for a tooltip. To define a CSS animation, we often use the @keyframes rule and then apply it to the target element using the animation property. For example, we can define a simple animation effect for a button:

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.button {
  animation: pulse 2s infinite;
  box-shadow: 0px 0px 1px 1px #0000001a;
}

We defined a simple animation effect, pulse, and applied it to any element with button class, where the box shadow will expand and shrink in a loop, lasting two seconds. This effect will run infinitely if the element exists in the DOM.

Figure 10-1. Indefinite pulse animation effect

Meanwhile, we can use the ...