7种过渡
动画过渡效果
第一种 css 过渡效果
要想使用过渡的元素,用 transtion 标签包裹起来,,制定一个name属性,name=h,
<style>
.box{
width:100px;
height:100px;
background : #000;
}
.height-enter-active{
从进入到完全进入及从离开到完全离开
transition : all 5s;
}
.height-leave-active{
transition : all 5s;
}
.height-enter,.height-leave-active{
进入之前及离开之后
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" 对应的是style的,.height-enter-active
<div id="box">
<button @click="show1=!show1">点击</button>
<transition name="height">
<div class="box" v-show="show1"></div>
</transition>
<hr>
<button @click="show2=!show2">点击</button>
<transition enter-active-class="animated tada" >
<div class="box" v-show="show2"></div>
</transition>
<hr>
<!-- 列表过度-->
<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>
