vue-animation
- 为什么要有动画 ?
- 就是要有不解释
- 比较简单记录一下,方便找
1. 过渡类名动画
1. html结构
<div id="app">
<input type="button" value="动起来" @click="myAnimate">
<!-- 使用 transition 将需要过渡的元素包裹起来 -->
<transition name="fade">
<div v-show="isshow">动画哦</div>
</transition>
</div>
2. VM 实例:
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
isshow: false
},
methods: {
myAnimate() {
this.isshow = !this.isshow;
}
}
});
3. 定义两组类样式:
/* 定义进入和离开时候的过渡状态 */
/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.v-enter,
.v-leave-to {
transform: translateX(100px);
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: