自定义实现动画
单元素动画—transition(过渡类名)
进入:两个时间点:v-enter v-enter-to
一个时间段:v-enter-active
离开:两个时间点:v-leave v-leave-to
一个时间段:v-leave-active
<style>
/* v-enter 进入之前 */
/* v-leave-to 离开之后 */
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(80px);
}
/* v-enter-active 入场时间段 */
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
}
</style>
多元素动画
<transition name="my">
<h3 v-if="flag2">这是一个h3</h3>
</transition>
<style>
/* 修改前缀:不同组的动画 */
.my-enter,
.my-leave-to{
opacity: 0;
transform:translateY(80px)
}
.my-enter-active,
.my-leave-active{
transition: all 0.8s ease;
}
</style>
表格动画
使用transition-group动画类包裹表格元素
- .v-move{ transition:all 0.6s ease} 移动时动画 ++ .v-leave-active{position:absolute}
实现删除列表时渐渐的飘上来 - li:hover{ background-color: red; transition: all 0.6s ease }
<transition-group>
<li v-for="item in list" :key="item.id">
{{item.id}}---{{item.name}}
</li>
</transition-group>
第三方animate.css实现动画
<link rel="stylesheet" href="./lib/animate.css">
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{ enter:200,levate:500}">
<h3 v-if="flag3">这是一个h3</h3>
</transition>
动画钩子函数实现动画(细粒度)
el: 表示要执行的原生JS Dom元素,可理解为document.getElementById(’’)方式获取到的Dom对象
执行特点:每次都会循环执行,每一次执行完毕后,都会执行before-enter钩子函数
- 定义一个小球
<transition>
<div class="ball" v-show="flag"></div>
</transition>
<style>
.ball{
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
- 动画过度类包装元素,并声明动画钩子函数
<transition @before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
- 编写 动画钩子函数
methods:{
//el表示js原生对象
beforeEnter(el) { //动画开始【
el.style.transform = "translate(0,0)"
},
enter(el,done){ //动画结束()
el.offsetWidth
el.style.transform = "translate(150px,450px)"
el.style.transition = "all 1s ease"
done()//调用下面函数
},
afterEnter(el){ //动画结束后】
this.flag=!this.flag
}
},