transition
1． 使用<transiton>標(biāo)簽把要執(zhí)行動(dòng)畫的DOM元素包裹起來吧史，可以使用name屬性給這個(gè)動(dòng)畫增加自定義名稱
<transition name="my">
<h1 v-if="show">這是一個(gè)標(biāo)題</h1>
</transition>
2． 給動(dòng)畫添加進(jìn)場(chǎng)和入場(chǎng)動(dòng)畫
.my-enter-active {
transition: all .9s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.my-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.my-enter, .my-leave-to
{
transform: translateX(10px);
opacity: 0;
}
image.png
動(dòng)畫也有動(dòng)畫的鉤子函數(shù)
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
</transition>
一個(gè)栗子
加入購物車的動(dòng)畫效果
<transition name="ball"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<div v-show="flag" style="height:20px;width:20px;border-radius:50%;background-color:red"></div>
</transition>
// 表示動(dòng)畫入場(chǎng)之前邮辽，此時(shí)動(dòng)畫尚未開始，可以在beforeEnter中設(shè)置開始動(dòng)畫之前的起始樣式
beforeEnter(el) {
el.style.transform = "translate(0,0)";
},
// 表示動(dòng)畫開始之后的樣式贸营，結(jié)束狀態(tài)
enter(el, done) {
el.offsetWidth;
el.style.transform = "translate(260px,260px)";
el.style.transition = "all 1s ease";
done();
// 在enter和leave方法中吨述，回調(diào)函數(shù)done是必須的，
},
afterEnter(el) {
this.flag = !this.flag;
}
transitionGroup
在實(shí)現(xiàn)列表過渡的時(shí)候钞脂，如果需要過渡的元素是通過v-for循環(huán)渲染出來的揣云，不能使用transition包裹，需要使用<transitionGroup>標(biāo)簽冰啃，如果要為v-for循環(huán)的元素設(shè)置動(dòng)畫邓夕，必須要為每一個(gè)元素設(shè)置：key屬性，不然會(huì)報(bào)錯(cuò)阎毅。
<input type="text" placeholder="請(qǐng)輸入id" v-model="id">
<input type="text" placeholder="請(qǐng)輸入人名" v-model="name">
<input type="submit" value="提交" @click="submit">
<!-- <ul> -->
<!-- 給transition-group添加appear屬性焚刚，實(shí)現(xiàn)頁面剛展示出來的時(shí)候入場(chǎng)的效果 -->
<!-- 通過為transition-group設(shè)置tag屬性，指定transition-group渲染為指定的元素扇调，
如果不指定tag屬性矿咕，默認(rèn)渲染為span標(biāo)簽 -->
<transition-group appear tag="ul">
<li v-for="(item ,index) in list" :key="index" @click="del(index)">
{{item.id}}-------{{item.name}}
</li>
</transition-group>
<!-- </ul> -->
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
/* .v-move {
transition: all 1s ease;
}
.v-leave-active {
position: absolute
} */
submit(){
let per = {
id:this.id,
name:this.name
};
this.list.push(per);
},
del(e){
this.list.splice(e,1);
}
mode屬性
多個(gè)元素同時(shí)生效的進(jìn)入和離開過渡模式
in-out：新元素先進(jìn)行過渡，完成之后當(dāng)前元素過渡離開
out-in：當(dāng)前元素先進(jìn)行過渡，完成之后新元素過渡進(jìn)入
