Vue3 Transitions and Animations (13)

1. The transition component

1.1. Transition Components

In development, we often want to add some kind of transition animation to the display and disappearance of a component, which can greatly increase the user experience

The React framework itself does not provide any animation-related apis, so use the React-transition-group library

Vue provides some built-in components and apis for animation, which make it easy to achieve transition animations

The following code to achieve show and hide, is not any animation effect, it is relatively stiff

If we want to animate a single element or component, we can animate it using the Transition built-in component

1.2. Principle of the Transition component

So above we have the h2 element animated

When Vue inserts or deletes elements contained in the Transition component, it does the following:

Automatically sniff out whether the target element has CSS transitions or animations applied, and if so, add/remove CSS class names when appropriate

If the Transition component provides JavaScript hook functions, these hook functions will be called at the appropriate time

If the JavaScript hook is not found and CSS transitions/animations are not detected, DOM insertion and deletion will be performed immediately

1.3. Transition animation Class

There are six CSS classes for entering and leaving transition effects

v-enter-from: Enters the start state of the animation. This CSS class is added before the element is inserted and removed the next frame after the element is inserted

v-enter-active: Enter the animation state, applied to the entire animation phase. This CSS class is added before the element is inserted and removed after the transition/animation is complete. This class can be used to define the duration, delay, and speed curve types that enter the animation

v-enter-to: Enters the end state of the animation. The CSS class is added the next frame after the element is inserted (i.ev-enter-fromIs removed) after the transition/animation is complete

v-leave-from: Leaves the initial state of the animation, added immediately when the leave transition effect is triggered and removed after one frame

v-leave-active: Leaves the animation in effect, applied to the entire leave animation phase. Added immediately when the exit transition effect is triggered and removed after the transition/animation is complete. This class can be used to define the duration, delay, and speed curve types that leave the animation

v-leave-to: Leaves the end state of the animation. This CSS class is added the next frame after a departure animation is triggered (i.ev-leave-fromIs removed) after the transition/animation is complete

If we use a transition without a name, then all classes are prefixed with v- by default

If we add a name attribute, such as
then all classes start with yun-

1.4. The Transition component is animated

In the previous section, we used transition to animate, and we can also use animation

1.5. Set transitions and animations at the same time

Vue internally listens for transitionEnd or AnimationEnd, depending on CSS rules

If we use only one of them, Vue automatically identifies the type and sets up a listener

If you use transitions and animations at the same time, you may have one execution completed and one execution not completed

In this case, we can explicitly tell the Vue what type to listen to by setting the type property to animation or Transition

1.6. Display the specified animation time

We can also specify the duration of the transition explicitly, via the Duration property

Duration can be set to two types of values:

Number type: Sets the transition time for both entry and exit

Object: Sets the transition time for entering and leaving respectively

1.7. Transition mode

We can see that the transition animation of the two elements will animate both entry and exit while the display is hidden

But if we don’t want to animate both entry and exit at the same time, we need to set the transition mode

In-out: The new element transitions first, and then the current element transitions away
Out-in: The current element transitions first, and then the new element transitions in

The same applies to switching dynamic components

1.8.appear First render

By default, there is no animation for the first rendering, so you want to add a “Appear” attribute

2. The animate. CSS animation library

It is relatively inefficient to write these animations one by one manually

So in development we may reference some third party library animation library, such as animation.css

Animate. CSS is a ready-made, cross-platform animation library for our Web projects, useful for emphasis, homepages, swipes, and attention guides

2.1. Customize the transition class

We can customize the transition class name with the following attributes

enter-from-class

enter-active-class

enter-to-class

leave-from-class

leave-active-class

leave-to-class

They take precedence over ordinary class names

This is useful for Vue’s transition system and other third-party CSS animation libraries such as animation.css. Useful in combination

2.2. Use the animate. CSS

Install the animate. CSS library:npm install animate.css
Main.js imports styles from the animate. CSS library:import "animate.css"
Use classes provided by Animation or animate

3. The gsap library

If we want to achieve some animation effects in JavaScript, we can use the GSAP library to do so

GSAP stands for The GreenSock Animation Platform

It animates CSS properties, SVG, Canvas, etc., via JavaScript, and is browser-compatible

3.1. JavaScript hooks

The Transition component gives us some JavaScript hooks that help us listen to what stage of the animation we’re at

When we use JavaScript to perform transition animations, we need to do the done callback, otherwise they will be called synchronously and the transition will complete immediately
Added when using animations that are executed only by JavaScript:css="false"We can control when the transition ends, which, in addition to being slightly better, prevents CSS rules from accidentally interfering with the transition

The use of 3.2 — gasp

Install gsap librarynpm install gsap
Import corresponding components into the GSAP libraryimport gsap from "gsap";

Gasp realizes the animation effect of the rapid change of numbers

4. List transitions

All of the transitions above are for a single node and one of many nodes at the same time

If we want to render a list, and we want to animate adding and removing data from the list, we can use the
component to do this

It has the following characteristics:

By default, it does not render an element wrapper, but you can specify an element and render it with a tag attribute

Internal elements always need to provide a unique key attribute

The transition mode mode is not available because we no longer switch between unique elements

CSS transitioning classes will be applied to internal elements, not the group/container itself

4.1. Basic case of list transition movement

Animating new and removed nodes is relatively easy to do, but if other list elements are not reanimated after deletion

We can do this by using a new v-move class that applies when an element changes position

Also customize the prefix with name

<template> <div> < button@click ="addNum"> </button> < button@click ="removeNum"> </button> <button <span v-for="item in numbers" :key="item" > <span v-for="item in numbers" :key="item" class="item"> {{ item }} </span> </transition-group> </div> </template> <script> import _ from "lodash"; export default { data() { return { numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], numCounter: 10, }; }, methods: { addNum() { this.numbers.splice(this.randomIndex(), 0, this.numCounter++); }, removeNum() { this.numbers.splice(this.randomIndex(), 1); }, shuffleNum() { this.numbers = _.shuffle(this.numbers); }, randomIndex() { return Math.floor(Math.random() * this.numbers.length); ,}}}; </script> <style scoped> .item { margin-right: 10px; display: inline-block; } .yun-enter-from, .yun-leave-to { opacity: 0; transform: translateY(30px); } .yun-enter-active, .yun-leave-active { transition: all 1s ease; } .yun-leave-active { position: absolute; } .yun-move { transition: transform 1s ease; } </style>Copy the code

4.2. Case of staggered transitions of lists

Let’s do an alternate disappear animation using the GSAP delay property

<template> <div> <input v-model="keyword" /> <transition-group tag="ul" :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave" > <li v-for="(item, index) in showNames" :key="item" :data-index="index"> {{ item }} </li> </transition-group> </div> </template> <script> import gsap from "gsap"; export default { data() { return { names: ["abc", "cba", "nba", "yun", "mu", "hmm", "kobe", "james"], keyword: "", }; }, computed: { showNames() { return this.names.filter((item) => item.indexOf(this.keyword) ! = = 1); }, }, methods: { beforeEnter(el) { el.style.opacity = 0; el.style.height = 0; }, enter(el, done) {gsap. To (el, {opacity: 1, height: "1.5em", delay: el.dataset. Opacity: 0, height: 0, delay: el.dataset. Index * 0.3, onComplete: done,}); ,}}}; </script> <style scoped></style>Copy the code

Vue2 transition and animation

What it does: When inserting, updating, or removing DOM elements, add style class names to the elements as appropriate.
Here is:
Writing:
1. Ready for style:
  - The style in which the element enters:
    1. V-enter: indicates the entry point
    2. V-enter-active: Indicates that the system is entering the active mode
    3. V-enter -to: indicates the end point of entry
  - The style in which the element leaves:
    1. V-leave: the departure point
    2. V-leave-active: indicates the departure process
    3. -Leonard: V-leave-to
2. Wrap the element to transition with
  and configure the name attribute:
```
<transition name="hello"> <h1 V-show ="isShow"> </h1> </transition>Copy the code
```
3. Note: If multiple elements need to be transition-group, use
  and specify a key value for each element.