为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；
使用过渡类名
步骤分析
需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏
1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来
transition 元素，是 Vue 官方提供的
2. 自定义两组样式，来控制 transition 内部的元素实现动画
代码结构
-
HTML结构：
<div id="app">
<input type="button" value="动起来" @click="myAnimate">
<!-- 使用 transition 将需要过渡的元素包裹起来 -->
<transition name="fade">
<div v-show="isshow">动画哦</div>
</transition>
</div>
-
VM 实例：
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
isshow: false
},
methods: {
myAnimate() {
this.isshow = !this.isshow;
}
}
});
-
定义两组类样式：
/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
}
/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
自定义v-前缀
用来区分不同组的动画
1.HTML结构
<transition name="my">
<h6 v-if="flag2">这是一个H6</h6>
</transition>
2.自定义样式
<style>
.my-enter,
.my-leave-to {
opacity: 0;
transform: translateY(70px);
}
.my-enter-active,
.my-leave-active{
transition: all 0.8s ease;
}
</style>