data:{
flag:false,
id:'',
name:'',
list:[
{id:1,name:"赵高"},
{id:2,name:"李高"}
]
}
1.Vue中的动画
2.使用过度类名实现动画
(1)使用transition元素，把需要被动画控制的元素，包裹起来,transition元素是Vue官方提供的
<input type="button" value="toggle" @click="flag=!flag">
<transition>
<h3 v-if="flag">这是一个h3</h3>
</transition>
(2)定义两组样式，来控制transition内部元素实现动画
<style>
//v-enter【这是一个时间点】是进入之前，元素的起始状态，此时还没有进入
//v-leave-to【这是一个时间点】是动画离开之后，离开的终止状态，此时，元素动画已经结束
.v-enter,.v-leave-to{
opacity:0;
//x轴移动
transform:translateX(150px);
}
//v-enter-active【入场动画时间段】
//v-leave-active【离场动画时间段】
.v-enter-active,.v-leave-active{
transition:all 0.4s ease;
}
</style>
3.自定义v-前缀
<input type="button" value="toggle" @click="flag=!flag">
//修改v-前缀
<transition name="my">
<h3 v-if="flag">这是一个h3</h3>
</transition>
<style>
.my-enter,.my-leave-to{
opacity:0;
transform:translateY(150px);
}
.my-enter-active,.my-leave-active{
transition:all 0.4s ease;
}
</style>
4.使用第三方animate.css类库实现动画
引入animated.css第三方类
//入场使用bounceIn，离场使用bounceOut
注意：写的时候需要加一个animated这样的一个基本的类
第(1)种写法：<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="200">
//使用:duration="毫秒值"来统一设置入场离场时候的动画时长
使用:duration="{ enter:200,leave:400}" 来分别设置入场的时长，和离场的时长
<h3 v-if="flag">这是一个h3</h3>
</transition>
第(2)种写法<transition enter-active-class="bounceIn" leave-active-class="bounceOut">
<h3 v-if="flag" class="animated">这是一个h3</h3>
</transition>
5.钩子函数实现半场动画
动画JavaScript钩子函数
https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90
<style>
.ball{
width:15px;
height:15px;
border-radius:50%;
background:red;
}
</style>
<input type="button" value="加入购物车" @click="flag=!flag">
//使用transition把小球包裹起来
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
<script>
methods:{
//注意：动画钩子函数的第一个参数：el，表示要执行动画的那个dom元素，是个原生的JS dom对象，
可以认为，el是通过 document.getelementById('')方式获取到的原生JS DOM对象
beforeEnter(el){
//brforeEnter表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
//设置小球开始动画之前的起始位置
el.style.transform="translate(0,0)"
}
enter(el,done){
//这句话没有实际的作用，但是如果不写，出不来动画效果,可以认为el.offsetWidth会强制动画刷新
el.offsetWidth
//表示动画开始之后的样式，这里可以设置小球完成动画之后的，结束状态
el.style.transform="translate(150px,450px)"
el.style.transition = 'all 1s ease'
//这里的done起始就是afterEnter这个函数，也就是说done就是afterEnter函数的引用
done();
}
afterEnter(el){
//动画完成之后，会调用afterEnter
this.flag = !this.flag
}
}
</script>
6.使用transition-group元素实现列表动画
<style>
li{
border:1px dashed #999
margin:5px;
line-height:35px;
padding-left:5px;
font-size:12px;
}
.v-enter,.v-leave-to{
opacity:0;
transform:translateY(80px);
}
v-enter-active,.v-leave-active{
transition:all 0.6s ease;
}
li:hover{
borderground-color:pink;
transition:all 0.4s ease;
}
</style>
<div>
<lable>
Id:<input type="text" v-model="id">
</lable>
<lable>
name:<input type="text" v-model="name">
</lable>
<input type="button" @click="add">
</div>
<ul>
//在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transition-group
<transition-group>
<li v-for="item in list" :key="item.id">
{{item.id}}---{{item.name}}
</li>
</transition-group>
</ul>
add(){
this.list.push({id:this.id;name:this.name})
this.id=this.name=' ';
}
7.移除时候的动画
<style>
li{
border:1px dashed #999
margin:5px;
line-height:35px;
padding-left:5px;
font-size:12px;
width：100%;
}
.v-enter,.v-leave-to{
opacity:0;
transform:translateY(80px);
}
.v-enter-active,.v-leave-active{
transition:all 0.6s ease;
}
li:hover{
borderground-color:pink;
transition:all 0.4s ease;
}
//.v-move和.v-leave-active配合使用，能够使列表后续的元素，渐渐地飘上来的效果
.v-move{
transition:all 0.6s ease;
}
.v-enter-active{
//absolute有一个特点，当你不指定宽度大小的时候，默认为最小值
position:absolute;
}
</style>
<transition-group>
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}---{{item.name}}
</li>
</transition-group>
del(i){
this.list.splice(i,1);
}
8.给transition-group添加appear属性实现入场时候的效果
//通过为transition-group元素设置tag属性，指定transition-group渲染为指定的元素，如果不指定tag属性，默认渲染为span标签
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}---{{item.name}}
</li>
</transition-group>
网友评论