data:{
flag:false,
id:'',
name:'',
list:[
{id:1,name:"趙高"},
{id:2,name:"李高"}
]
}
1.Vue中的動畫
2.使用過度類名實現(xiàn)動畫
(1)使用transition元素犀变，把需要被動畫控制的元素，包裹起來,transition元素是Vue官方提供的
<input type="button" value="toggle" @click="flag=!flag">
<transition>
<h3 v-if="flag">這是一個h3</h3>
</transition>
(2)定義兩組樣式峰髓，來控制transition內(nèi)部元素實現(xiàn)動畫
<style>
//v-enter【這是一個時間點】是進入之前尤泽，元素的起始狀態(tài)谒所，此時還沒有進入
//v-leave-to【這是一個時間點】是動畫離開之后，離開的終止狀態(tài)，此時炕贵，元素動畫已經(jīng)結(jié)束
.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類庫實現(xiàn)動畫
引入animated.css第三方類
//入場使用bounceIn缘圈，離場使用bounceOut
注意：寫的時候需要加一個animated這樣的一個基本的類
第(1)種寫法：<transition enter-active-class="animated bounceIn"? leave-active-class="animated bounceOut" :duration="200">
//使用:duration="毫秒值"來統(tǒng)一設(shè)置入場離場時候的動畫時長
使用:duration="{ enter:200,leave:400}" 來分別設(shè)置入場的時長劣光，和離場的時長
<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.鉤子函數(shù)實現(xiàn)半場動畫
動畫JavaScript鉤子函數(shù)
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:{
//注意：動畫鉤子函數(shù)的第一個參數(shù)：el，表示要執(zhí)行動畫的那個dom元素糟把，是個原生的JS dom對象绢涡，
可以認為，el是通過 document.getelementById('')方式獲取到的原生JS DOM對象
beforeEnter(el){
//brforeEnter表示動畫入場之前遣疯，此時雄可，動畫尚未開始，可以在beforeEnter中缠犀，設(shè)置元素開始動畫之前的起始樣式
//設(shè)置小球開始動畫之前的起始位置
el.style.transform="translate(0,0)"
}
enter(el,done){
//這句話沒有實際的作用数苫，但是如果不寫，出不來動畫效果,可以認為el.offsetWidth會強制動畫刷新
el.offsetWidth
//表示動畫開始之后的樣式辨液，這里可以設(shè)置小球完成動畫之后的文判，結(jié)束狀態(tài)
el.style.transform="translate(150px,450px)"
el.style.transition = 'all 1s ease'
//這里的done起始就是afterEnter這個函數(shù)，也就是說done就是afterEnter函數(shù)的引用
done();
}
afterEnter(el){
//動畫完成之后室梅，會調(diào)用afterEnter
this.flag = !this.flag
}
}
</script>
6.使用transition-group元素實現(xiàn)列表動畫
<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>
//在實現(xiàn)列表過渡的時候戏仓，如果需要過渡的元素是通過v-for循環(huán)渲染出來的疚宇，不能使用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配合使用赏殃，能夠使列表后續(xù)的元素敷待，漸漸地飄上來的效果
.v-move{
transition:all 0.6s ease;
}
.v-enter-active{
//absolute有一個特點，當(dāng)你不指定寬度大小的時候仁热，默認為最小值
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屬性實現(xiàn)入場時候的效果
//通過為transition-group元素設(shè)置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>
