7種過(guò)渡
動(dòng)畫過(guò)渡效果
第一種 css 過(guò)渡效果
要想使用過(guò)渡的元素,用 transtion 標(biāo)簽包裹起來(lái),,制定一個(gè)name屬性,name=h,
<style>
.box{
width:100px;
height:100px;
background : #000;
}
.height-enter-active{
從進(jìn)入到完全進(jìn)入及從離開到完全離開
transition : all 5s;
}
.height-leave-active{
transition : all 5s;
}
.height-enter,.height-leave-active{
進(jìn)入之前及離開之后
height:0;
}
li{
display:inline-block;
list-style:none;
margin:10px;
}
.li-enter-active,.li-leave-active{
transition : all 2s;
}
.li-enter,.li-leave-active{
opacity : 0;
}
</style>
transtion neme 屬性的 name="height" 對(duì)應(yīng)的是style的,.height-enter-active
<div id="box">
<button @click="show1=!show1">點(diǎn)擊</button>
<transition name="height">
<div class="box" v-show="show1"></div>
</transition>
<hr>
<button @click="show2=!show2">點(diǎn)擊</button>
<transition enter-active-class="animated tada" >
<div class="box" v-show="show2"></div>
</transition>
<hr>
<!-- 列表過(guò)度-->
<button @click="add">click it</button>
<transition-group tag="ul" name="li">
<li v-for="(x,index) in arr"
:key="index">{{ x }}---{{index}}</li>
</transition-group>
</div>
</body>
<script src="vue2.0.js"></script>
<script>
var vm = new Vue({
el : "#box",
data : {
show1 : true,
show2 : true,
arr : ["a","b"],
},
components : {
},
methods : {
add : function(){
var pos = parseInt(Math.random()*this.arr.length);
var val = parseInt(Math.random()*100);
// this.arr.push(parseInt(Math.random()*100))
this.arr.splice(pos,0,val);
}
},
computed : {},
})
</script>
