使用transition 元素 把 需要被動(dòng)畫控制的元素包裹起來transition元素是vue官方提供的
分為
分為兩組 ENTER 和 LEAVE
其中 分別分為
兩個(gè)時(shí)間點(diǎn) 和 一個(gè)時(shí)間段
v-enter;v-enter-to ; v-enter-active
v-leave ;v-leave-to ; v-leave-active
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<!--自定義兩組樣式來控制transition內(nèi)部的元素實(shí)現(xiàn)動(dòng)畫-->
<style>
/* v-enter [這是一個(gè)時(shí)間點(diǎn)] 進(jìn)入之前元素的起始狀態(tài)，此時(shí)還沒有開始進(jìn)入*/
/* v-leave-to [] 動(dòng)畫離開之后 離開的終止?fàn)顟B(tài) 此時(shí)矾策，元素動(dòng)畫已經(jīng)結(jié)束了*/
.v-enter,
.v-leave-to{
opacity:0;
transform: translateX(80px);
}
/*v-enter-active 入場動(dòng)畫的時(shí)間段*/
/* v-leave-active 出場動(dòng)畫的時(shí)間段*/
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease;
}
</style>
<body>
<!--需求：點(diǎn)擊按鈕讓H3顯示 再點(diǎn)擊讓H3隱藏-->
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!--使用transition 元素 把 需要被動(dòng)畫控制的元素包裹起來-->
<!--transition元素是vue官方提供的-->
<transition>
<h3 v-if="flag">這是一個(gè)H3</h3>
</transition>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:false
},
methods:{
}
})
</script>
</html>
實(shí)現(xiàn)一組動(dòng)畫
當(dāng)我們想要 一個(gè)H3 和 一個(gè)H6的時(shí)候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<!--自定義兩組樣式來控制transition內(nèi)部的元素實(shí)現(xiàn)動(dòng)畫-->
<style>
/* v-enter [這是一個(gè)時(shí)間點(diǎn)] 進(jìn)入之前元素的起始狀態(tài)，此時(shí)還沒有開始進(jìn)入*/
/* v-leave-to [] 動(dòng)畫離開之后 離開的終止?fàn)顟B(tài) 此時(shí)糊治，元素動(dòng)畫已經(jīng)結(jié)束了*/
.v-enter,
.v-leave-to{
opacity:0;
transform: translateX(80px);
}
/*v-enter-active 入場動(dòng)畫的時(shí)間段*/
/* v-leave-active 出場動(dòng)畫的時(shí)間段*/
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease;
}
.v-enter,
.v-leave-to{
opacity:0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease;
}
</style>
<body>
<!--需求：點(diǎn)擊按鈕讓H3顯示 再點(diǎn)擊讓H3隱藏-->
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!--使用transition 元素 把 需要被動(dòng)畫控制的元素包裹起來-->
<!--transition元素是vue官方提供的-->
<transition>
<h3 v-if="flag">這是一個(gè)H3</h3>
</transition>
<hr>
<input type="button" value="toggle" @click="flag=!flag">
<!--使用transition 元素 把 需要被動(dòng)畫控制的元素包裹起來-->
<!--transition元素是vue官方提供的-->
<transition>
<h6 v-if="flag">這是一個(gè)H6</h6>
</transition>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:false
},
methods:{
}
})
</script>
</html>
現(xiàn)在這兩組動(dòng)畫是相同的
現(xiàn)在可以通過修改V-前綴來進(jìn)行兩組動(dòng)畫的分別控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<!--自定義兩組樣式來控制transition內(nèi)部的元素實(shí)現(xiàn)動(dòng)畫-->
<style>
/* v-enter [這是一個(gè)時(shí)間點(diǎn)] 進(jìn)入之前元素的起始狀態(tài)尽狠，此時(shí)還沒有開始進(jìn)入*/
/* v-leave-to [] 動(dòng)畫離開之后 離開的終止?fàn)顟B(tài) 此時(shí)晰骑，元素動(dòng)畫已經(jīng)結(jié)束了*/
.v-enter,
.v-leave-to{
opacity:0;
transform: translateX(80px);
}
/*v-enter-active 入場動(dòng)畫的時(shí)間段*/
/* v-leave-active 出場動(dòng)畫的時(shí)間段*/
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease;
}
.my-enter,
.my-leave-to{
opacity:0;
transform: translateY(80px);
}
.my-enter-active,
.my-leave-active{
transition: all 0.4s ease;
}
</style>
<body>
<!--需求：點(diǎn)擊按鈕讓H3顯示 再點(diǎn)擊讓H3隱藏-->
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!--使用transition 元素 把 需要被動(dòng)畫控制的元素包裹起來-->
<!--transition元素是vue官方提供的-->
<transition>
<h3 v-if="flag">這是一個(gè)H3</h3>
</transition>
<hr>
<input type="button" value="toggle" @click="flag2=!flag2">
<!--使用transition 元素 把 需要被動(dòng)畫控制的元素包裹起來-->
<!--transition元素是vue官方提供的-->
<transition name="my">
<h6 v-if="flag2">這是一個(gè)H6</h6>
</transition>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:false,
flag2:false
},
methods:{
}
})
</script>
</html>
通過給transition元素添加一個(gè)name屬性 此時(shí)控制他的CSS就變成了"【name】-"前綴 這樣就可以實(shí)現(xiàn)不同動(dòng)畫
