一、 实现原理
在插入、更新、移除
DOM
元素时,在合适的时候给元素添加样式类名,配合
CSS
样式使用,实现动画效果。
通俗来讲,就是将要进行动画操作的
DOM
元素用
transition
标签包裹起来。在此html元素运动前,运动中,运动后这三个时候
vue
会给此
DOM
元素添加不同的
class
,然后配合
CSS
样式,实现动画效果。
示例:
<template><div><button@click="bol = !bol">隐藏/显示</button><!-- Vue 的内置动画标签 transition --><transition><!-- 只能包含 1 个元素 --><h1v-show="bol">组件动画效果</h1><!-- 需要设置 v-show / v-if 属性控制元素的显示 --></transition></div></template><script>exportdefault{name:"TestDemo",data(){return{bol:true};},};</script><style>/* 进入:始状态 */.v-enter{transform:translateX(-100%);color: red;}/* 进入:末状态 */.v-enter-to{transform:translateX(0);color: yellow;}/* 进入动画 */.v-enter-active{transition: 10s;color:linear-gradient(red,yellow);;}/* 离开:始状态 */.v-leave{transform:translateX(0);}/* 离开:末状态 */.v-leave-to{transform:translateX(-100%);}/* 离开动画 */.v-leave-active{transition: 1s;}</style>
二、 transition 标签
Vue
的内置动画标签:transition
transition
标签只能包含 1 个元素;如果里面写了多个元素,则只生效第一个transition
包裹的标签需要设置v-show
/v-if
属性控制元素的显示
三、 动画 CSS 样式对应的类名
- 进入:
.v-enter
始状态、.v-enter-to
末状态、.v-enter-active
进入动画 - 离开:
.v-leave
始状态、.v-leave-to
末状态、.v-leave-active
离开动画 .v-enter
、.v-leave
定义了动画的初始状态,在里面可以定义初始的位置,颜色,字体等。.v-enter-to
、.v-leave-to
定义了动画的最终状态,这两个类的定义最好和 DOM 的 class保持一致,否则动画结束后会瞬间从.v-enter-to
、.v-leave-to
的样式转变为 DOM 的样式(实例一,实例二).v-enter-active
、.v-leave-active
定义了动画的渐变规则,比如是位置渐变的话会定义渐变的时间,路径;颜色渐变的话会定义颜色相关的渐变规则
3.1 实例一
会从红色渐变为黄色
<template><div><button@click="bol = !bol">隐藏/显示</button><transition><h1v-show="bol"class="demo">组件动画效果</h1></transition></div></template><script>exportdefault{name:"TestDemo",data(){return{bol:true};},};</script><style>.v-enter-active,
.v-leave-active{transition: 10s !important;color:linear-gradient(red,yellow)!important;}.demo{color: yellow;}.v-enter,
.v-leave-to{transform:translateX(-50%);color: red;}</style>
3.2 实例二
会从红色渐变为黄色,然后瞬间变为黑色
<template><div><button@click="bol = !bol">隐藏/显示</button><transition><h1v-show="bol"class="demo">组件动画效果</h1></transition></div></template><script>exportdefault{name:"TestDemo",data(){return{bol:true};},};</script><style>.v-enter,
.v-leave-to{transform:translateX(-50%);color: red;}.v-enter-to,
.v-leave{transform:translateX(0);color: yellow;}.v-enter-active,
.v-leave-active{transition: 10s !important;color:linear-gradient(red, yellow)!important;}</style>
四、 transition 标签的属性
4.1 name 属性
用于自动生成 CSS 动画类名
- 如果
transition
标签元素没有设置name
属性,则对应的动画类名为v-XXX
- 果设置了
name
属性,则对应的动画类名为属性值-XXX
- 当存在多个
tansition
标签时,我们可以通过name
属性给各个transition
标签指定不同的CSS
动画效果
4.2 appear 属性
一开始就生效显示动画
4.3 mode 属性
in-out
: 新元素先进行过渡,完成之后当前元素过渡离开out-in
: 当前元素先进行过渡,完成之后新元素过渡进入
4.4 示例
<template><div><button@click="bol = !bol">隐藏/显示</button><!-- Vue 的内置动画标签 transition --><transitionname="test"appear><!-- 只能包含 1 个元素 --><h1v-show="bol">组件动画效果</h1><!-- 需要设置 v-show / v-if 属性控制元素的显示 --></transition></div></template><script>exportdefault{name:"TestDemo",data(){return{bol:true};},};</script><style>.test-enter,
.test-leave-to{transform:translateX(-50%);color: red;}.test-enter-to,
.test-leave{transform:translateX(0);color: yellow;}.test-enter-active,
.test-leave-active{transition: 10s !important;color:linear-gradient(red,yellow)!important;}</style>
五、 transition-group 标签
transition
标签只能包含 1 个元素、transition-group
标签可以包含多个元素transition-group
标签里面的元素需要设置key
属性,作为当前元素的唯一标识- 除此之外,其它用法都和
transition
标签一样
<template><divid="app"><button@click="isEditing = !isEditing">切换</button><transition-groupappear><h1v-if="isEditing"key="save">Save</h1><h1v-if="!isEditing"key="edit">Edit</h1></transition-group></div></template><script>exportdefault{name:"TestDemo",data(){return{isEditing:true};},};</script><style>h1{transition: 3s;position: absolute;}.v-leave{opacity: 1;}.v-leave-to{opacity: 0;}.v-enter{opacity: 0;}.v-enter-to{opacity: 1;}</style>
六、 JavaScript钩子函数
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
console.log('beforeEnter');
console.log(el);
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
console.log('enter');
console.log(el);
done()
},
afterEnter: function (el) {
console.log('afterEnter');
console.log(el);
},
enterCancelled: function (el) {
console.log('enterCancelled');
console.log(el);
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
console.log('beforeLeave');
console.log(el);
},
leave: function (el, done) {
console.log('leave');
console.log(el);
done()
},
afterLeave: function (el) {
console.log('afterLeave');
console.log(el);
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
console.log('leaveCancelled');
console.log(el);
}
},
七、 vue实现动画的多种方法
7.1 transition
<template><div><button@click="bol = !bol">隐藏/显示</button><transitionname="fade"><pv-if="bol">hello</p></transition></div></template><script>exportdefault{name:"TestDemo",data(){return{bol:true};},};</script><stylescoped>.fade-enter-active,
.fade-leave-active{transition: all 3s;}.fade-enter,
.fade-leave-to{opacity: 0;width: 100px;}p{border: 1px solid red;width: 300px;}</style>
7.2 animation + @keyframes
<template><div><button@click="bol = !bol">隐藏/显示</button><transitionname="bounce"><pv-show="bol"class="demo">组件动画效果</p></transition></div></template><script>exportdefault{name:"TestDemo",data(){return{bol:true};},};</script><style>.bounce-enter-active{animation: bounce-in 5s;}.bounce-leave-active{animation: bounce-in 5s reverse;}@keyframes bounce-in{0%{transform:scale(0);}50%{transform:scale(1.5);}100%{transform:scale(1);}}</style>
7.3 animate.css
- 安装:
npm install animate.css
- 引入样式库:
import "animate.css"
- 给指定的
transition
标签添加name
属性animate_animate、animate__bounce
- 配置
enter-active-class
属性,指定进入动画:在样式库中挑一个进入的样式值,作为enter-active-class
属性值 - 配置
leave-active-class
属性,指定退出动画:在样式库中挑一个退出的样式值,作为leave-active-class
属性值
<template><div><button@click="bol = !bol">隐藏/显示</button><transitionname="animate__animated animate__bounce"enter-active-class="animate__bounceIn"leave-active-class="animate__bounceOut"><pv-show="bol"name="animate_animate">组件动画效果</p></transition></div></template><script>import"animate.css";exportdefault{name:"TestDemo",data(){return{bol:true};},};</script>
7.4 JavaScript钩子
- 当只用
JavaScript
过渡时,在enter
和leave
中必须使用done
进行回调。否则,它们将被同步调用,过渡会立即完成。 - 推荐对于仅使用
JavaScript
过渡的元素添加v-bind:css="false"
,Vue
会跳过CSS
的检测。这也可以避免过渡过程中CSS
的影响。
7.5 Velocity.js
- 安装:
npm install velocity-animate
<template><divid="app"><button@click="show = !show">显示/隐藏</button><br/><transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:leave="leave"v-bind:css="false"><pv-show="show">hello</p></transition></div></template><script>import Velocity from"velocity-animate";exportdefault{name:"App",data:function(){return{show:true,};},methods:{beforeEnter:function(el){
el.style.opacity =0;},enter:function(el, done){Velocity(
el,{rotateZ:"0deg",translateY:"0px",translateX:"0px",opacity:1,},{complete: done });},leave:function(el, done){Velocity(
el,{rotateZ:"45deg",translateY:"30px",translateX:"30px",opacity:0,},{complete: done });},},};</script>
7.6 多个元素的过渡
<template><divid="example-2"><transitionname="fade"mode="out-in"><buttonv-if="isEditing"key="save"@click="isEditing = !isEditing">
Save
</button><buttonv-elsekey="edit"@click="isEditing = !isEditing">Edit</button></transition></div></template><script>exportdefault{name:"TransitionTest",data(){return{name:"TransitionTest",isEditing:false,};}};</script><stylescoped>.fade-enter-active,
.fade-leave-active{transition: all 1s;}.fade-enter{opacity: 0;transform:translateX(50px);}.fade-leave-to{opacity: 0;transform:translateX(-50px);}#example-2{position: relative;padding: 100px;}#example-2 button{position: absolute;}</style>
7.7 多个组件的过渡
<template><divid="transition-components-demo"><button@click="view = 'VA'">a</button><button@click="view = 'VB'">b</button><transitionname="component-fade"mode="out-in"><componentv-bind:is="view"></component></transition></div></template><script>importVAfrom"./VA.vue";importVBfrom"./VB.vue";exportdefault{name:"TransitionTest",data(){return{view:"VA",};},components:{VA,VB,},};</script><stylescoped>.component-fade-enter-active,
.component-fade-leave-active{transition: opacity 2s ease;}.component-fade-enter,
.component-fade-leave-to{opacity: 0;}</style>
7.8 for循环怎么动画 (列表的进入/离开过渡)
<template><divid="list-demo"class="demo"><buttonv-on:click="add">Add</button><buttonv-on:click="remove">Remove</button><transition-groupname="list"tag="p"><spanv-for="item in items":key="item"class="list-item">
{{ item }}
</span></transition-group></div></template><script>exportdefault{name:"TransitionTest",data(){return{items:[1,2,3,4,5,6,7,8,9],nextNum:10,};},methods:{randomIndex:function(){return Math.floor(Math.random()*this.items.length);},add:function(){this.items.splice(this.randomIndex(),0,this.nextNum++);},remove:function(){this.items.splice(this.randomIndex(),1);},},};</script><stylescoped>.list-item{display: inline-block;margin-right: 10px;}.list-enter-active,
.list-leave-active{transition: all 1s;}.list-enter, .list-leave-to{opacity: 0;transform:translateY(30px);}</style>
参考
- 【Vue】transition 标签的使用
- Vue之transition
- 过渡 & 动画
版权归原作者 一天一丢丢 所有, 如有侵权,请联系我们删除。