作用: 提高用户体验,更好理解页面中功能
vue把一个完整的动画拆分为入场动画和出场动画
入场动画包含:进入之前v-enter
和进入之后v-enter-to
v-enter
表示动画入场之前的起始状态
v-enter-to
表示动画入场完成之后的终止状态
v-enter-active
表示入场动画的时间段 规定动画的时长以及相关的动画效果
v-leave
表示动画出场的开始状态
v-leave-to
表示动画出场的结束状态
v-leave-active
表示出场动画的时间段 规定动画的时长以及相关的动画效果
1.使用过渡类名
1)实现动画效果的元素需放在<transition>
中
<transition>
<h3 v-show="flag">这是一个要使用动画控制的元素</h3>
</transition>
2)添加样式
<style>
.v-enter,
.v-leave-to{
opacity:0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
/*所有属性 1s 过渡效果*/
}
.v-enter-to,
.v-leave{
opacity: 0.5;
transform: translateX((40px));
}
</style>
2.使用JS动画生命周期函数实现半场动画
1)将元素放入<transition>
中,定义三个钩子函数
<div id="app">
<input type="button" value="加入购物车" @click="flag=!flag">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div id="ball" v-show="flag"></div>
</transition>
</div>
2)定义三个方法
<script>
var vm = new Vue({
el:"#app",
data:{
flag:false
},
methods:{
beforeEnter(el){//小球开始动画之前的起始状态
el.style.transform = "translate(0,0)"
},
enter(el,done){//小球动画结束之后的结束状态 done表示afterEnter
el.offsetWidth //固定写法 否则无法实现动画效果 el.offsetHeight ..都可
el.style.transform = "translate(150px,300px)"
el.style.transition = "all 1s ease"
//动画实现完毕后会自动调用done(),done结束afterEnter的引用
done()
},
//所有属性 1s 过渡效果
afterEnter(el){//小球动画结束之后的回调函数,做一些清理工作
this.flag = !this.flag;
}
}
});
</script>
3)添加样式
<style>
#ball{
width:15px;
height:15px;
background-color: red;
background: radious 50%;
}
</style>
3.v-for列表过渡
1)用transition-group
组件把v-for
循环的列表包裹起来
<div id="app">
Id:<input type="text" v-model="id">
Name: <input type="text" v-model="name">
<input type="button" value="添加" @click="add">
<!-- 默认为span -->
<!-- 在transion-group 使用v-for必须使用key -->
<ul>
<transition-group tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="remove(i)">{{item.id}}-------{{item.name}}</li>
</transition-group>
</ul>
</div>
注:<transition-group>
默认为<span>
标签 可使用tag="ul"
2)定义样式
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
li{
line-height: 30px;
border: 1px dashed #ccc;
margin: 5px;
font-size: 12px;
padding-left: 10px;
width: 500px;
cursor: pointer;
}
li:hover{
background-color: orange;
box-shadow: 0 0 7px gray;
/* transition: all 0.6s ease; */
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(200px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
/*在transition-group组件中,以下两个结合使用,能够让列表的过渡更加平缓柔和*/
.v-move{ /*让元素被改变定位时,有一个缓动效果*/
transition: all 0.5s ease;
}
.v-leave-active{/*表示要被删除的那个元素 absolute脱离标准流不占位置*/
position: absolute;
}
</style>
3)
<script>
var vm = new Vue({
el:"#app",
data:{
list:[
{id:1,name:"gaojun"},
{id:2,name:"fuge"},
{id:3,name:"yujie"},
{id:4,name:"binge"},
],
id:"",
name:""
},
methods:{
remove(i){
this.list.splice(i,1)
},
add(){
const p ={id:this.id,name:this.name}
this.list.push(p)
this.id = this.name = ""
}
}
});
</script>