Summary:

Vue provides a variety of different application transitions when inserting, updating, or removing the DOM.

Includes the following tools:

Automatically apply class to CSS transitions and animations
You can use third-party CSS animation libraries, such as animation.css
Use JavaScript to manipulate the DOM directly in transitional hook functions
You can use a third-party JavaScript animation library, such as velocity.js

Preface:

Animation is an essential part of daily development, which not only makes the direct switching of elements more natural, but also greatly enhances the user experience. Therefore, Vue also provides very powerful support for animation in this aspect. Vue not only supports CSS to write some transition effects, but also supports JS But this article is all about using CSS for transition animations.

Transition class name to implement animation:

Let’s start with a picture stolen from an official document:

Animation entry:

V-enter: The initial state before the animation enters
V-enter -to: Indicates the end state after the animation enters
V-enter-active: indicates the period during which the animation enters

PS: The first and second are time points; The third is the time period.

Animation away:

V-leave: The initial state before the animation leaves
V-leave-to: Indicates the end state after the animation leaves
V-leave-active: indicates the period during which the animation leaves

PS: The first and second are time points; The third is the time period. Note: there is a more specific explanation of the concept in the official documentation.

The realization principle of transition animation:

1. First of all, if you want to animate a transition within a single element or component, you need to wrap a <transition> tag around the element or component's HTML tag. Both transitions and animations need to be wrapped around this <transition> tag. 2. After the element/component is wrapped in the <transition> tag, Vue will automatically create an animation flow for us, which will be described below, so just keep this in mind If you add styles to the <style> tag, Vue will automatically add and remove styles from the element or component at some point in time. When an element/component is wrapped in a < Transition > tag, Vue automatically builds an animation that automatically adds/removes CSS class names at some point in time. Vue actually provides six class names, as shown in the figure above.Copy the code

Maybe animation is a little abstract, here are some pictures to help you understand:

We assume that the black line is the entire animation flow and the red dot is the animation start moment:

Animation entry:

1. When an element is wrapped in Transition, Vue automatically analyzes the element’s CSS style and builds an animation flow. So when we wrap an element/component with a tag Vue will add two CSS class names v-Enter/V-Enter to just before the animation starts

3. Then, when the animation is about to be executed, two classes are added to the div. Vv is V-Enter and V-Enter -active. When the first frame ends and the second frame begins: Vue will remove the v-enter class and add the v-enter class. And the v-Enter-active class is going to be there for the entire animation until the end of the animation.

4. At the last moment of animation execution: Vue removes the V-enter -active and V-Enter -to.

Now let’s look at the animation from show to hide, similar to the image above, but with the class name changed:

Animation away:

3. Then, when the animation is about to be executed, two classes are added to the div, vV being V-leave and V-leave-active. When the first frame ends and the second frame goes on: Vue will remove the previous V-leave class and add the v-leave-to class. The v-leave-active class persists throughout the animation until the end of the animation.

4. At the last moment of animation execution: Vue removes both V-leave-active and V-leave-to.

Summary of transition animation:

Conclusion 1: Therefore, the two classes fade-enter-active and fade-leave-active actually run through the entire animation, so add transition animation or listening attribute here. The other four properties, by contrast, are changes made to the properties of the monitored animation at some point in time.

Conclusion 2: The states of V-enter -to and V-leave are the same. In general, the states of V-Enter and V-leave-to are the same. So, we can write these four states as two groups.

In other words: Vue animations are implemented by adding animation-related classes to elements at some point.

Transition class animation small demo

Here are a few small demos implemented using Vue’s transition class name:

<style> /* box-sizing: border-box; width: 100px; height: 100px; background: red; } /* Effect of the first box */ /* tran1-enter-active time period of the entry animation tran1-leave-active time period of the exit animation */. Tran1-enter-active, .tran1-leave-active { transition: opacity 1s; /* Set the transition properties: */ /* Tran1-enter this is a point in time before entering the initial state of the element, which has not yet entered */ /* Tran1-leave-to is after the animation has left, */. Tran1-enter,.tran1-leave-to {opacity: 0; Tran2-enter-active {transition: all 1s ease; transition: all 1s ease; Tran2-leave-active {transition: all 1s ease; Opacity: 0; opacity: 0; opacity: 0; opacity: 0; transform: translateX(10px); /* Horizontal right 10px tran2-enter to start the DOM element 10px to the right */} </style> <body> <! Both transition and animation effects need to be wrapped in the Transition tag. Transition element, provided by Vue --> <! --> <div id="tran1">
        <button @click="show = ! show"</button> <transition name="tran1" mode="">
            <div class="box" v-if = "show"></div>
        </transition>
    </div>
    <br>
    <div id="tran2">
        <button @click="show = ! show"</button> <transition name="tran2" mode="">
            <div class="box" v-if="show"></div>
        </transition>
    </div>
</body>

<script>
        let vm1 = new Vue({
            el: '#tran1',
            data: {
                show: true,}})let vm2 = new Vue({
            el: '#tran2',
            data: {
                show: true,
            }
        })
            </script>
Copy the code

Custom transition class name

That is, change the prefix of the transition class name

In the previous section,. V-enter and. V-leave-to transition class names begin with v-. One limitation is that if you have two DOM elements wrapped in Transition, then both DOM elements have the animation defined in V -.

So what if we want to animate two DOM elements separately? We can do this by changing the prefix of the transition class name. Such as:

1. Customize an alias

 <transition name="my">
      <h6 v-if="flag2"> This is an H6</ H6 > </transition>Copy the code

In the code above, we added name=”my”.

2. Use aliases (we can use.my-enter,.my-leave-to, etc)

  .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(70px);
    }

Copy the code

CSS animation: Animate. CSS library

Use the Animate. CSS library in Vue

<style> /* animations */. Anim1-enter-active {animation: bounce-in 1s; } .anim1-leave-active { animation: bounce-in 3s reverse; } /* @keyframes bounce-in {/* if the frames last 1 second, 0% means 0 seconds, 50% means 0.5 seconds, 100% means 1 second */ 0% {transform: scale(0); } 50% {transform: scale(1.5); } 100% { transform: scale(1); } } </style> <body> <! --> <div id="anim1">
        <button @click="show = ! show"</button> <br> <transition name='anim1'>
            <div class="box" v-if="show"></div>
        </transition>
    </div>
    </body>
<script>
            let vm3 = new Vue({
            el: '#anim1',
            data: {
                show: true,
            }
        })

</script>

Copy the code

After we have the transition tag, do we have to use the fade-enter-active or fade-leave-active selector name? No, we also have a selector that can be used in multiple ways: the selector is normally named, and the transition tag contains properties like Enter-active-class and leave-active-class

Active {/* normal name */ animation: bounce-in 1s; }. Leave {/ / animation: bounce-in 3s reverse; } /* @keyframes bounce-in {/* if the frames last 1 second, 0% means 0 seconds, 50% means 0.5 seconds, 100% means 1 second */ 0% {transform: scale(0); } 50% {transform: scale(1.5); } 100% { transform: scale(1); } } <div id="anim1">
        <button @click="show = ! show"</button> <br> <! <transition enter-active-class= <transition enter-active-class="active" leave-active-class="leave">
            <div class="box" v-if="show"></div>
        </transition>
    </div>

Copy the code

Use the Animate. CSS

With the transition tag, we now use the Animate. CSS library. Download the Animate library and you can use all of the Animate effects without writing them yourself. The official website: daneden. Making. IO/animate. CSS…

    <link rel="stylesheet" href="./am.css">

    <div id="anim1">
        <button @click="show = ! show"</button> <br> <! <transition enter-active-class= <transition enter-active-class="animated swing" leave-active-class="animated shake">
            <div class="box" v-if="show"></div>
        </transition>
    </div>

Copy the code

Using animate. CSS

In the above code, we use the animate classes bounceIn and bounceOut to animate the entry and exit of the animation. Note 1: The two class names of Enter-active-class and leave-active-class are keywords in Vue animation, and cannot be written as arbitrary class names.

If either of the bounceIn or bounceOut classes is animated, either of the animated classes is animated; if either of the bounceIn or bounceOut classes is animated, either of the animated classes is animated. Otherwise the animation won’t work. Of course, from the above code, we could also move the class = animated code to the H3 tag and have the same effect, as follows:

<transition enter-active-class="swing" leave-active-class=" shake" :duration="{ enter: 1000, leave: 300 }> box" v-if="show" class="animated"> Copy the code

If we want to set the duration of the entry and exit animations, we can use :duration.

Use :duration=”{enter: 1000, leave: 300}” to set the duration of entry and departure respectively

In short, vUE transition and animation, there are a lot of things in the official website, here is written here, later when free to come back to continue the update.

Reference article:

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue transitions & the use of animation

Summary:

Preface:

Transition class name to implement animation:

Animation entry:

Animation away:

The realization principle of transition animation:

Summary of transition animation:

Transition class animation small demo

Custom transition class name

CSS animation: Animate. CSS library

Use the Animate. CSS

Using animate. CSS

Vue transitions & the use of animation

Summary:

Preface:

Transition class name to implement animation:

Animation entry:

Animation away:

The realization principle of transition animation:

Summary of transition animation:

Transition class animation small demo

Custom transition class name

CSS animation: Animate. CSS library

Use the Animate. CSS

Using animate. CSS

Related Posts

Implement one dimensional array to tree structure encapsulation – refuse to modify attributes

Experience of participating in Huawei Devui open source component library

TypeScript interfaces, generic exercises