项目的源代码在GitHub上：点击查看

目录

vue中的css动画原理

在Vue中使用Animate.css库

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

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

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

vue中的列表过渡

vue中的动画封装

vue中的动画特效--总结

vue中的css动画原理

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

<!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库文件地址）
<!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"/>
    <!--引入了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的使用）
  • 当两个动画同时使用时以谁的动画时间为准，定义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"/>
    <!--引入了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">
        <!--appear解决了第一次没有动画的,type="transition"设置以过渡效果的时长作为总时长-->
        <!--:duration="10000"设置自定义动画播放的时常，:duration="enter: 5000,leave: 10000"设置入场和出场的动画时间-->
        <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钩子)
  • 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属性（文档：单元素/组件的过渡）
  • 多个组件的动画过渡：这里使用的是component标签和 :is插槽的用法（文档：内置的组件-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>
             <!-- 这里尽量不使用index作为key -->
            <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>
    <!-- css定义动画就没有必要了，我们这里使用js动画 -->
    <!-- <style>
        .fade-enter,.fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active ,.fade-leave-active {
            transition: opacity 1s;
        }
    </style> -->
</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文档的进入/离开 & 列表过渡讲完啦（文档：进入/离开 & 列表过渡）
  • 还有两个地方没有讲，动态过渡和状态过渡（有需要的自己查看文档）
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

操作系统大会&openEuler Summit 2024参会指南，请查收！

avatar 开放原子开发者工作坊

推动工业软件核心技术攻关，开源工业软件算法集成大赛正式启动！

推动工业软件核心技术攻关，开源工业软件算法集成大赛正式启动！

avatar 开放原子开发者工作坊

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

avatar 开放原子开发者工作坊