vue 动画（transition）
一、 实现原理
在插入、更新、移除 DOM 元素时，在合适的时候给元素添加样式类名，配合 CSS 样式使用，实现动画效果。
通俗来讲，就是将要进行动画操作的 DOM 元素用 transition 标签包裹起来。在此html元素运动前，运动中，运动后这三个时候 vue 会给此 DOM 元素添加不同的 class ，然后配合 CSS 样式，实现动画效果。
示例：
<template>
<div>
<button @click="bol = !bol">隐藏/显示button>
<transition>
<h1 v-show="bol">组件动画效果h1>
transition>
div>
template>
<script>
export default {
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的内置动画标签:transitiontransition标签只能包含 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>
<h1 v-show="bol" class="demo">组件动画效果h1>
transition>
div>
template>
<script>
export default {
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>
<h1 v-show="bol" class="demo">组件动画效果h1>
transition>
div>
template>
<script>
export default {
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>
<transition name="test" appear>
<h1 v-show="bol">组件动画效果h1>
transition>
div>
template>
<script>
export default {
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>
<div id="app">
<button @click="isEditing = !isEditing">切换button>
<transition-group appear>
<h1 v-if="isEditing" key="save">Saveh1>
<h1 v-if="!isEditing" key="edit">Edith1>
transition-group>
div>
template>
<script>
export default {
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>
<transition name="fade">
<p v-if="bol">hellop>
transition>
div>
template>
<script>
export default {
name: "TestDemo",
data() {
return { bol: true };
},
};
script>
<style scoped>
.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>
<transition name="bounce">
<p v-show="bol" class="demo">组件动画效果p>
transition>
div>
template>
<script>
export default {
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>
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__bounceIn"
leave-active-class="animate__bounceOut"
>
<p v-show="bol" name="animate_animate">组件动画效果p>
transition>
div>
template>
<script>
import "animate.css";
export default {
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>
<div id="app">
<button @click="show = !show">显示/隐藏button>
<br />
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-show="show">hellop>
transition>
div>
template>
<script>
import Velocity from "velocity-animate";
export default {
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>
<div id="example-2">
<transition name="fade" mode="out-in">
<button v-if="isEditing" key="save" @click="isEditing = !isEditing">
Save
button>
<button v-else key="edit" @click="isEditing = !isEditing">Editbutton>
transition>
div>
template>
<script>
export default {
name: "TransitionTest",
data() {
return {
name: "TransitionTest",
isEditing: false,
};
}
};
script>
<style scoped>
.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>
<div id="transition-components-demo">
<button @click="view = 'VA'">abutton>
<button @click="view = 'VB'">bbutton>
<transition name="component-fade" mode="out-in">
<component v-bind:is="view">component>
transition>
div>
template>
<script>
import VA from "./VA.vue";
import VB from "./VB.vue";
export default {
name: "TransitionTest",
data() {
return {
view: "VA",
};
},
components: {
VA,
VB,
},
};
script>
<style scoped>
.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>
<div id="list-demo" class="demo">
<button v-on:click="add">Addbutton>
<button v-on:click="remove">Removebutton>
<transition-group name="list" tag="p">
<span v-for="item in items" :key="item" class="list-item">
{{ item }}
span>
transition-group>
div>
template>
<script>
export default {
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>
<style scoped>
.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
- 过渡 & 动画