Vue实战项目开发--Vue中的动画特效

末蓝、 2022-05-23 13:29 442阅读 0赞

# 项目的源代码在GitHub上：[点击查看][Link 1] #

**目录**

vue中的css动画原理

在Vue中使用Animate.css库

在Vue中同时使用过渡属性和动画

Vue中的Js动画与Velocity.js的结合

Vue中多个元素或组件的过渡

vue中的列表过渡

vue中的动画封装

vue中的动画特效--总结

--------------------

### vue中的css动画原理 ###

需要实现动画效果的标签需要<transition>包裹

![20180612191434664][]

![20180612191445797][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的CSS动画原理</title>
        <script src="./vue.js"></script>
        <style>
            .fade-enter,.fade-leave-to {
                opacity: 0;
            }
            .fade-enter-active ,.fade-leave-active {
                transition: opacity 3s;
            }
        </style>
    </head>
    <body>
    
        <div id="root">
            <transition name="fade">
                <div v-if="show">hello world</div>
            </transition>
            <button @click="handleClick">切换</button>
        </div>
    
        <script>
            var vm = new Vue({
                el: "#root",
                data: {
                    show: true
                },
                methods: {
                    handleClick: function () {
                        this.show = (this.show === true ? false : true)
                    }
                }
            })
        </script>
    </body>
    </html>

注意：这里的v-if也可以用v-show代替。vue的动画效果的原理是CSSs中的transition属性

还有就是<transition>没有设置name属性，那么默认为v-enter、v-enter-active和v-leave、v-leave-to

### 在Vue中使用Animate.css库 ###

*  必须使用class自定义名字的方式（enter-active-class="animated swing"，必须添加animated，然后第二个参数是动画效果的名字），来使用animate.css库
 *  必须引入animate.css库文件（下载地址：[animate.css库文件地址][animate.css]）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>在Vue中的使用animate.css库</title>
        <script src="./vue.js"></script>
        <link rel="stylesheet" type="text/css" href="./animate.css"/>
        
    </head>
    <body>
    
        <div id="root">
            <transition
                    name="fade"
                    enter-active-class="animated swing"
                    leave-active-class="animated shake"
            >
                <div v-if="show">hello world</div>
            </transition>
            <button @click="handleClick">toggle</button>
        </div>
    
        <script>
            var vm = new Vue({
                el: "#root",
                data: {
                    show: true
                },
                methods: {
                    handleClick: function () {
                        this.show = (this.show === true ? false : true)
                    }
                }
            })
        </script>
    </body>
    </html>

### 在Vue中同时使用过渡属性和动画 ###

*  通过appear实现页面的初次动画
 *  如何既使用animate.css的动画也使用transition过渡（文档：[transition的使用][transition]）
 *  当两个动画同时使用时以谁的动画时间为准，定义type来确定；除此还可以自定义动画时长

注意：不明白怎么使用的，一定要看文档

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>在Vue中同时使用过渡属性和动画</title>
        <script src="./vue.js"></script>
        <link rel="stylesheet" type="text/css" href="./animate.css"/>
        
        <style>
            .fade-enter, .fade-leave-to {
                opacity: 0;
            }
            .fade-enter-active,
            .fade-leave-active {
                transition: opacity 3s;
            }
        </style>
    </head>
    <body>
    
        <div id="root">
            
            
            <transition
                    type="transition"
                    name="fade"
                    appear
                    enter-active-class="animated swing fade-enter-active"
                    leave-active-class="animated shake fade-leave-active"
                    appear-active-class="animated swing"
            >
                <div v-if="show">hello world</div>
            </transition>
            <button @click="handleClick">toggle</button>
        </div>
    
        <script>
            var vm = new Vue({
                el: "#root",
                data: {
                    show: true
                },
                methods: {
                    handleClick: function () {
                        this.show = (this.show === true ? false : true)
                    }
                }
            })
        </script>
    </body>
    </html>

### Vue中的Js动画与Velocity.js的结合 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的JS动画与velocity.js</title>
        <script src="./vue.js"></script>
        <script src="./velocity.js"></script>
    </head>
    <body>
    
        <div id="root">
            <transition 
                name="fade"
                @before-enter="handleBeforeEnter"
                @enter="handleEnter"
                @after-enter="handleAfterEnter"
            >
                <div v-show="show">hello world</div>
            </transition>
            <button @click="handleClick">toggle</button>
        </div>
    
        <script>
            var vm = new Vue({
                el: "#root",
                data: {
                    show: true
                },
                methods: {
                    handleClick () {
                        this.show = !this.show 
                    },
                    handleBeforeEnter (el) {
                       el.style.opacity = 0;
                    },
                    handleEnter (el, done) {
                       Velocity(el, {
                           opacity: 1
                        }, {
                            duration: 1000,
                            complete: done
                        })
                    },
                    handleAfterEnter (el) {
                       console.log("动画结束")
                    }
                }
            })
        </script>
    </body>
    </html>

*  使用vue中的js钩子来实现js动画效果(js钩子：[JavaScript钩子][JavaScript])
 *  velocity.js动画库实现动画效果（官网：[velocity.js][]）

其中：before-enter、enter、after-enter就是vue中的js钩子，查看更多就点击上面链接

注意：不明白怎么使用的，一定要看文档

### Vue中多个元素或组件的过渡 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中多个元素或组件的过渡</title>
        <script src="./vue.js"></script>
        <style>
            .v-enter,.v-leave-to {
                opacity: 0;
            }
            .v-enter-active, .v-leave-active {
                transition: opacity 1s;
            }
        </style>
    </head>
    <body>
    
        <div id="root">
            //多个元素的动画过渡
            <transition mode="out-in">
                <div v-if="show" key="hello">hello world</div>
                <div v-else key="bye">Bye World</div>
            </transition>
            <button @click="handleClick">toggle</button>
    
            //多个组件的动画过渡
            <transition mode="out-in" >
                <component :is="type"></component>
            </transition>
            <button @click="handleClick1">toggle</button>
        </div>
    
        <script>
    
            Vue.component('child',{
                template: '<div>child</div>'
            })
    
            Vue.component('child-one',{
                template: '<div>child-one</div>'
            })
            var vm = new Vue({
                el: "#root",
                data: {
                    show: true,
                    type: 'child'
                },
                methods: {
                    handleClick () {
                        this.show = !this.show 
                    },
                    handleClick1 () {
                        this.type = this.type === 'child' ? 'child-one' : 'child'
                    }
                }
            })
        </script>
    </body>
    </html>

*  多个元素的动画过渡：这里使用的是默认的过渡类名，也可以在transition上添加name属性（文档：[单元素/组件的过渡][Link 2]）
 *  多个组件的动画过渡：这里使用的是component标签和 :is插槽的用法（文档：[内置的组件-component][-component]）

注意：不明白怎么使用的，一定要看文档

### vue中的列表过渡 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的列表过渡</title>
        <script src="./vue.js"></script>
        <style>
            .v-enter, .v-leave-to {
                opacity: 0;
            }
            .v-enter-active, .v-leave-active {
                transition: opacity 1s;
            }
        </style>
    </head>
    <body>
    
        <div id="root">
            <transition-group>
                 
                <div v-for="(item, index) 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 () {
                    this.list.push({
                        id:count++,
                        title: 'hello world'+" "+ count
                    })
                }
               }
            })
        </script>
    </body>
    </html>

*  使用transition-group来包裹列表，相当于在每个div上都加上了一个transition（文档：[transition-group][]）
 *  循环列表的key最好不使用index

注意：不明白怎么使用的，一定要看文档

### vue中的动画封装 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的CSS动画原理</title>
        <script src="./vue.js"></script>
        
        
    </head>
    <body>
    
        <div id="root">
            <fade :show="show">
                <div>hello world</div>
            </fade>
               
            <fade :show="show">
                <h1>hello world</h1>
            </fade>
                   
           
            <button @click="handleBtnClick">toggle</button>
        </div>
    
        <script>
    
            Vue.component('fade', {
                props: ['show'],
                template:
                `
                    <transition @before-enter="handleBeforeEnter"
                        @enter="hanleEnter">
                        <slot v-if="show"></slot>
                    </transition>
                `,
                methods: {
                    handleBeforeEnter (el) {
                        el.style.color = 'red'
                    },
                    hanleEnter (el, done) {
                        setTimeout(()=>{
                            el.style.color = 'green'
                            done()
                        },2000)
                    },
                }
            }) 
                
            var vm = new Vue({
                el: "#root",
                data: {
                    show: false
                },
                methods: {
                    handleBtnClick: function () {
                        this.show = !this.show 
                    }
                }
            })
        </script>
    </body>
    </html>

*  有两种封装动画效果的方法：css动画和js动画，推荐使用js动画，这样可以把动画效果封装成一个组件，不需要全局定义css样式

### vue中的动画特效--总结 ###

*  这里把vue文档的进入/离开 & 列表过渡讲完啦（文档：[进入/离开 & 列表过渡][Link 3]）
 *  还有两个地方没有讲，动态过渡和状态过渡（有需要的自己查看文档）

[Link 1]: https://github.com/HZhen/Vue-project
[20180612191434664]: /images/20220523/90035c1688c14c969cae31df80b689ed.png
[20180612191445797]: /images/20220523/8ecb4b1d2ddc445e9ba500adce1d3e43.png
[animate.css]: https://daneden.github.io/animate.css/
[transition]: https://cn.vuejs.org/v2/api/#transition
[JavaScript]: https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90
[velocity.js]: http://velocityjs.org/#duration
[Link 2]: https://cn.vuejs.org/v2/guide/transitions.html#%E5%8D%95%E5%85%83%E7%B4%A0-%E7%BB%84%E4%BB%B6%E7%9A%84%E8%BF%87%E6%B8%A1
[-component]: https://cn.vuejs.org/v2/api/#component
[transition-group]: https://cn.vuejs.org/v2/api/#transition-group
[Link 3]: https://cn.vuejs.org/v2/guide/transitions.html