正文
vue 动画
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下几种常见的方式：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
附上官方的动画状态图：
说明：
-
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 -
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 -
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter被移除)，在过渡/动画完成之后移除。 -
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 -
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 -
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave被删除)，在过渡/动画完成之后移除。
一、使用css过渡动画
css部分：
<style>
/* v-enter 一个时间点，进入之前，元素其实状态，此时还没有进入 */
/* v-leave-to 时间点，动画离开之后，离开的种子状态，此时元素动画已经结束 */
.v-enter,
.v-leave-to
{
opacity:;
transform: translateX(150px)
}
/* v-enter-active 入场动画时间段 */
/* v-leave-active 离场动画时间段 */
.v-enter-active,
.v-leave-active{
/* 让动画有个过渡的渐变效果 */
transition:all 0.4s ease;
}
HTML部分：
<div id="app">
<button type="button" @click="flag=!flag">切换</button> <!-- 1.使用transition标签包裹需要被动画控制得元素，vue提供 -->
<transition>
<p v-if="flag">这是个p标签</p>
</transition>
</div>
JS部分：
var app = new Vue({
el: "#app",
data() {
return {
message: 'hello!',
flag: false,
}
},
methods: {
sayHi() {
console.log("hello");
}
}
});
当然还可以自定义v-前缀，默认使用的是vue内置的类来控制transition标签的动画。
CSS部分：
/* 在 transition 标签中加个 name='my' 属性，可局部自定义动画 */
.my-enter,
.my-leave-to
{
opacity:;
transform: translateY(300px)
} .my-enter-active,
.my-leave-active{
/* 让动画有个过渡的渐变效果 */
transition:all 0.4s ease;
}
HTML部分：
<button type="button" @click="flag2=!flag2">切换2</button>
<!-- 1.使用transition标签包裹需要被动画控制得元素，vue提供，加了个 name='my' -->
<transition name="my">
<p v-if="flag2">这是个p2标签</p>
</transition>
二、使用第三方css动画库实现
引入第三方动画库
<link rel="stylesheet" href="../lib/animate.css">
css部分不用自定义了..
HTML部分：
<button type="button" @click="flag=!flag">切换</button>
<!-- 使用 :duration="毫秒值" 来控制进场和离场的时长 -->
<transition
enter-active-class="bounceIn"
leave-active-class="bounceOut"
:duration="{enter:200,leave:400}">
<p v-if="flag" class="animated">这是个p2标签</p>
</transition>
JS部分：
var app = new Vue({
el: "#app",
data() {
return {
message: 'hello!',
flag: false,
flag2: false
}
},
methods: {
sayHi() {
console.log("hello");
}
}
});
四、使用js钩子函数实现
需求：点击 【切换】 按钮，一个黄色的小球会从（0,0）位置移动到（150px,450px）位置中去然后消失。
CSS部分：
<style>
.ball{
width:30px;
height:30px;
border-radius: 50%;
background-color: yellow;
}
</style>
HTML部分：
<div id="app">
<button type="button" @click="flag=!flag">切换</button> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div v-if="flag" class="ball"></div>
</transition>
</div>
JS部分：
var app = new Vue({
el: "#app",
data() {
return {
flag: false,
}
},
methods: {
beforeEnter(el) {
console.log("beforeEnter")
el.style.transform = "translate(0,0)";
},
enter(el, done) {
console.log("enter")
// 强制动画的使用
el.offsetWidth
el.style.transform = "translate(150px,450px)"
el.style.transition = "all 1s ease"
// 这个done就是afterEnter的函数引用
done()
},
afterEnter(el) {
console.log("afterEnter")
this.flag = !this.flag;
}
}
});
