This is the fifth day of my participation in the First Challenge 2022

Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky

Writing in the front

In practical development, transition animations are often used to increase user experience, and transition animations are implemented in CSS through transition and animation. In Vue, Vue itself has some built-in components and APIS to help us easily achieve transition animation effects; So let’s do that.

The Transition component of Vue

The Transition component is provided in Vue, which automatically adds an in/out transition effect to an element in one of the following situations:

  • usev-ifConditions apply colours to a drawing
  • usev-showConditions of display
  • Dynamic components
  • Component root node

It’s also easy to use. Wrap any component or element you want to animate with a < Transition > component, and then define a set of classes.

Transition demo

The following code shows the basic usage of the
component:

<template>
  <button class="btn btn-primary" @click="helloWorldShow = ! helloWorldShow">Show and Hide</button>
  <br />
  <img alt="Vue logo" src="./assets/logo.png" />
  <transition>
    <hello-world v-if="helloWorldShow" msg="[One Bowl week] Transition Animation Demo" />
  </transition>
</template>

<script setup>
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
const helloWorldShow = ref(true)
</script>

<style>
#app {
  /* more css */
}
/* Before entering and after leaving styles */
.v-enter-from..v-leave-to {
  opacity: 0;
}
/* Styles in the exit and entry processes */
.v-enter-active..v-leave-active {
  /* Add transition animation */
  transition: opacity 0.5 s ease;
}
/* After entering and before leaving styles */
.v-enter-to..v-leave-from {
  opacity: 1;
}
</style>
Copy the code

The code looks like this:

Some of the classes used above have the following meanings:

  • v-enter-from: Defines the state at the beginning of the transition. It takes effect before the element is inserted and is removed the next frame after the element is inserted.
  • v-enter-active: Defines the state when the transition takes effect. Applied throughout the transition phase, before the element is inserted and removed after the transition/animation is complete. This class can be used to define the process time, delay, and curve functions that enter the transition.
  • v-enter-to: Defines the end state of the transition. The next frame takes effect after the element is inserted (at the same timev-enter-fromRemoved) after the transition/animation is complete.
  • v-leave-from: Defines the beginning state of the exit transition. Immediately after the exit transition is triggered, the next frame is removed.
  • v-leave-active: Defines the state when the exit transition takes effect. Applies throughout the exit transition phase, takes effect immediately when the exit transition is triggered, and removes after the transition/animation is complete. This class can be used to define exit transition process time, delay and curve functions.
  • v-leave-to: Leaving the end state of transition. The next frame takes effect after the exit transition is triggered (at the same timev-leave-fromRemoved) after the transition/animation is complete.

The following is an image from the Vue documentation that perfectly illustrates the process

Class naming rules

The
component’s class name does not have to be prefixed with v-. You can customize the prefix by adding a name attribute, such as
, and all prefixes become Ywz -.

The use of animation

We used the transition property to transition components into and out of the system. Now we can use the animation property to do this.

<transition>
  <hello-world v-if="helloWorldShow" msg="[One Bowl week] Transition Animation Demo" />
</transition>
Copy the code

css

/* Animating: animating: animating: animating: animating: animating: animating: animating: animating: animating; }Copy the code

The code results are as follows:

Transition mode

Let’s start with a problem that occurs when an animation switches between two elements. The code to reproduce this problem is as follows:

<template>
  <button class="btn btn-primary" @click="show = ! show">Show and Hide</button>
  <br />
  <transition>
    <hello-world v-if="show" msg="[One Bowl week] Transition Animation Demo" />
    <img v-else alt="Vue logo" src="./assets/logo.png" />
  </transition>
</template>

<script setup>
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
const show = ref(true)
</script>

<style>
/ * * / has been eliminated
</style>
Copy the code

The running effect is as follows:

Sometimes we don’t need this effect, so we need to set the
component’s transition mode property, which has three values:

  • default: The new element is executed at the same time as the current element.
  • in-out: The new element enters first, and then the current element leaves.
  • out-in: The current element leaves first, and the new element enters after completion.

Now that we know about this property, we modify the code to look like this:

<transition mode="out-in">
  <hello-world v-if="show" msg="[One Bowl week] Transition Animation Demo" />
  <img v-else alt="Vue logo" src="./assets/logo.png" />
</transition>
Copy the code

The result now looks like this:

Appear properties

The
component’s Appear property is used to start the manual rendered animation, and it accepts a Boolean value, as shown in the following code:

<transition mode="out-in" appear>
  <img v-if="show" alt="Vue logo" src="./assets/logo.png" />
</transition>
Copy the code

Use of the animate. CSS library

It would be inefficient to write these sequences one by one, so we often use animation libraries, the most common of which is animate. CSS.

Now let’s look at how to use animate. CSS in Vue:

  1. The installationanimate.css
npm i animate.css
Copy the code
  1. The introduction ofanimate.css
// main.js
import 'animate.css'
Copy the code

Using animation sequences

.v-enter-active {
  animation: fadeInDown 0.5 s;
}
.v-leave-active {
  animation: fadeOutDown 0.5 s;
}
Copy the code

Use custom transition classes

The < Transition > component also provides properties to customize the transition class, as follows:

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class

They take precedence over normal class names.

<transition
  mode="out-in"
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutDown"
>
  <img v-if="show" alt="Vue logo" src="./assets/logo.png" />
</transition>
Copy the code

Write in the last

This article introduces the basic use of transitions. You can easily implement transitions with the < Transition > component provided by Vue and animate. CSS.

In addition to transitions for individual components, Vue also provides TransitionGroup components, which are used to animate transitions for multiple components, as we’ll cover later.