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

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

项目的源代码在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文档的进入/离开 & 列表过渡讲完啦(文档:进入/离开 & 列表过渡
  • 还有两个地方没有讲,动态过渡和状态过渡(有需要的自己查看文档)

点这里可以跳转到人工智能网站

发表评论