preface

Today is another day of learning, I concluded my knowledge of Vue animation special effects. When I forget which day I will open my nuggets and then the cat a few eyes send a few to write 🦈 summary content is as follows

The body of the

CSS animation principles in Vue

If you want an animation, you put the element in the Transition tag (you can give the transition tag a name like fade), so that you have a transition animation. Principle: principle: When an element is wrapped in transition, VUE will automatically analyze the CSS style of the element and build an animation process. Vue will add two class names to the inner tag element immediately after the animation is executed, namely fade-Enter and fade-Enter. When the first frame of the animation is completed and the VUE analyzes the transition and knows that it is an animation effect, the VUE will do two events in the second frame of the animation, 1. Remove the fade-enter class name. 2. Add the fade-enter class name. The animation then continues until vue removes the fade-enter-active and fade-enter-to moments before it ends

transition
transition 

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> CSS animation in Vue </title> <script SRC =".. /vue.js"></script>
    <style>
        .fade-enter {
            opacity: 0;
        }
        .fade-enter-active {
            transition: opacity 3s;
        }
        .fade-leave-to {
            opacity: 0;
        }
        .fade-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition name="fade">
        <div v-if="show">hello world</div>
        </transition>
       
       <button @click="handleClick"</button> </div> <script> var vm = new Vue({el:'#app',
            data: {
                    show:true
            },
            methods: {
                handleClick:function() { this.show = ! this.show } }, }) </script> </body> </html>Copy the code

Use the Animate. CSS library in Vue

When you make animation effects can use CSS3 animation and so on to make, when you don’t want to own knock time (is very lazy, disobey to hit me 🐷) how to do? You can then use Animate. CSS (provided with CSS3@keyframes animation effects) and click in. You will have a variety of animation effects to choose from.

  1. Download the Animate. CSS library from the official website
  2. Change both enter-active-class and leave-active-class to animated on transition. This tells Vue that I want to use an animation from the Animate library
<transition 
        name="fade"
        enter-active-class="animated"
        leave-active-class="animated"
        >
Copy the code
  1. Step 3 Go to the Annimate library and select the name of the animation you want, then add animated after Animated
enter-active-class="animated swing"
leave-active-class="animated shake"
Copy the code

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Use the Animate. CSS library </title> <script SRC = in Vue".. /vue.js"></script>
    <link rel="stylesheet" href="./animate.css">
    <style>  
        
    </style>
</head>
<body>
    <div id="app">
        <transition 
        name="fade"
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        >
        <div v-if="show">hello world</div>
        </transition>
       
       <button @click="handleClick"</button> </div> <script> var vm = new Vue({el:'#app',
            data: {
                    show:true
            },
            methods: {
                handleClick:function() { this.show = ! this.show } }, }) </script> </body> </html>Copy the code

But when you run the above code you will find that the elements are not animated the first time the page is rendered. How do you animate the elements the first time they are loaded on the page 👀

Z just has to add these two lines of code to transition

<transition 
        name="fade"
        appear  
        enter-active-class="animated swing"
        leave-active-class="animated shake"
        appear-active-class="animated swing"
        >
Copy the code

One is “Appear”, which tells Vue that I want animation the first time I load it, or cry

Use both transitions and animations in Vue

What if you want to Animate @KeyFrames with the Animate library and also use transition?

The right hand

enter-active-class="animated swing"
leave-active-class="animated shake"
Copy the code

to

enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
Copy the code

I can define my transition animation as I did before. 👩🏫Animate @keyframes has its own time, and your transition from Animate to Animate has its own time. Vue can’t tell the difference either. This is where we need to set it manually. Put one on the Transition label

<transition 
        type="transition"
Copy the code

Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Animate Of course, you can also customize the duration of the animation, if you customize it, you need to write this

<transition 
        :duration="10000"
Copy the code

The unit is milliseconds. The type in the previous step does not need to be set. You can open the console to review the animation elements to see the animation execution time, you can also set a relatively complex point

:duration="{enter: 5000,leave:10000}"
Copy the code

Specify the duration of both the entry animation and the disappearance animation

A combination of animation in Vue with velocity.js

In addition to Transition and @keyframes, Vue gives us a lot of JS animation hooks. There were

Animation start @before-enter @before-leave This process has an EL parameter that identifies the tag element wrapped by transition
The animation process @enter @leave This procedure takes two arguments: an EL and a done method, which tells Vue that the animation is finished
End of the animation @after-enter @after-leave This process also has an EL parameter k 
<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"</title> <script SRC =".. /vue.js"></script>
</head>
<body>
    <div id="app"> <! Vue gives us a lot of JS animation hooks --> <! <transition name= <transition name= <transition name= <transition name= <transition name= <transition name= <transition name="fade"
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter"
         >
        <div v-show="show">hello world</div>
        </transition>
       
       <button @click="handleClick"</button> </div> <script> var vm = new Vue({el:'#app',
            data: {
                    show:true
            },
            methods: {
                handleClick: function() { this.show = ! This.show}, // handleBeforeEnter can receive a parameter el, which refers to the element tag wrapped by the animation, in this case div handleBeforeEnter:function(el) {
                    // console.log(el)
                    el.style.color = 'red'}, // The first argument el refers to the element tag wrapped by the animation, the second argument is the callback function (this callback function is also important), remember to manually call the following when the animation is finisheddoneThis callback, //, tells Vue that the animation is finished,doneAfter the call completes, we can execute the after-Enter animation hook handleEnter:function(el, done) {
                    setTimeout( () => {
                        el.style.color = 'green'}, 2000).setTimeout(() => {
                        done()
                    }, 4000)
                },
                handleAfterEnter: function(el) {
                    el.style.color = '# 000'
                }
            },
        })
    </script>
</body>
</html>
Copy the code

@before-Enter, @Enter, and @after-Enter are three animated hook functions that accept el in their binding events and modify the style of the transition tag. You can receive a done method only in the event bound to the @Enter animation procedure. Used to tell Vue that the animation is finished. The event bound to the @after-Enter animation hook function is executed only after this method is called. The same goes for leave’s three animated hook functions. d

Velocity.js is a popular animation library

How do I use the velocity.js library? 1. Download the file from the official website and import it locally

Velocity()
Copy the code

The excess of multiple elements or components in a Vue

Let’s take a look at some code

  • The element
<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> The transition of multiple elements or components in Vue </title> <script SRC =".. /vue.js"></script>
    <style>
        .fade-enter,.fade-leave-to {
            opacity: 0;
        }
        .v-enter-active, .v-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition 
        name="fade">
        <div v-if="show">hello world</div>
        <div v-else>Bye World</div>
        </transition>
       <button @click="handleClick"</button> </div> <script> var vm = new Vue({el:'#app',
            data: {
                    show:true
            },
            methods: {
                handleClick: function() { this.show = ! this.show } }, }) </script> </body> </html>Copy the code

What this code is trying to do is animate div switches, but this code doesn’t animate them at all. This is because vUE tries to reuse the DOM as much as possible when switching between the two elements, so the animation doesn’t occur. I talked about how to reuse DOM in VUE as a result in VUE Technical Share 1. All you need to do is give the two div tags different keys

<div v-if="show" key="one">hello world</div>
<div v-else key="two">Bye World</div>
Copy the code

Just modify the code as above and you can see the animation effect. Vue also provides a mode configuration parameter in Transition to set the effect of multiple attributes switching, and -mode only applies to the same label switching within a transition. You can set two values: in-out(new element overflows first, current element overflows after completion) and out-in(current element overflows first, new element overflows after completion).

  • See dynamic component binding for details
<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> The transition of multiple elements or components in Vue </title> <script SRC =".. /vue.js"></script>
    <style>
        .fade-enter,.fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="app"> <! Vue provides a mode configuration parameter to set the effect of multiple transition properties --> < Transition name="fade" mode="in=out">
        <component :is="type"></component>
        </transition>
       <button @click="handleClick"</button> </div> <script> Vue.component('child',{
            template:'<div>child</div>'
        })
        Vue.component('child-one',{
            template:'<div>child-one</div>'
        })
        var vm = new Vue({
            el: '#app',
            data: {
                   type:'child'
            },
            methods: {
                handleClick: function() {
                    this.type = this.type === 'child' ? 'child-one' : 'child'
                }
            },
        })
    </script>
</body>
</html>
Copy the code

Create two components and use the Component dynamic component in Transition: Is =”type” dynamically binds component elements. Define type as ‘child’ in the root component data and the page renders the Child component first. The handleClick event toggle the type value between the two components. The transition mode configuration parameter is used to animate components. Introduce animation effects. If you need to create cool animation effects, you can browse the official website of Velocity.js to check the documentation

List transitions in Vue

In previous articles we have used the Transition component for transitions, which can be used either for a single node or for rendering one of multiple nodes at the same time. For transitions to the entire list (such as using V-for), you need to use the transition-group component described below. Look at a simple chestnut

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> List transition in Vue </title> <script SRC =".. /vue.js"></script>
    <style>
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>

<body>
    <div id="root">
        <transition-group name="fade">
            <div v-for="item of list" :key="item.id">
                {{item.title}}
            </div>
        </transition-group>
        <button @click="handleBtnClick">Add</button>
    </div>

    <script>
        var count = 0
        var vm = new Vue({
            el: "#root",
            data: {
                list: []
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push({
                        id: count++,
                        title: 'hello world'
                    })
                }
            },
        })
    </script>
</body>

</html>
Copy the code

Wrap the elements that need to be looping in transition-grop and animate each element as the implementation adds or removes it. The idea is that transition-grop is a transition attribute attached to each looping element tag, and the animation method is defined the same way. This will animate every time an element is added or removed from the list. Good for animating multiple elements

Animation encapsulation in Vue

Wrapping the animation in Vue is very simple. Just wrap the Transition as a component and use a slot in a template

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Animation encapsulation in Vue </title> <script SRC =".. /vue.js"></script>
    <style>
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active, .fade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="app">
        <fade :show="show">
        <div>hello world</div>
        </fade>   
        <fade :show="show">
        <div><h1>hello world</h1></div>
        </fade>   
       <button @click="handleClick"</button> </div> <script> Vue.component('fade', {
            props: ['show'],
            template: `
            <transition name="fade">
                <slot v-if="show"></slot>
            </transition>
            `
        })

        var vm = new Vue({
            el: '#app',
            data: {
                    show: false
            },
            methods: {
                handleClick: function() { this.show = ! this.show } } }) </script> </body> </html>Copy the code

The code above wraps the Transition into a component called fade. Templates use slots so that they can be used to wrap different tag elements. And v-if is used on slot, so just use the fade tag externally to include the element that needs to be animated and pass the value to the component. The style in the above code is written outside the component, but you can also use the JS animation hook in the component directly to encapsulate animation effects in the component. You can try it on yourself. Conclusion 😊

conclusion

I hope this article can help you see the article 🤘