一.多元素动画
如果transition标签里有多个元素做动画,比如做个toggle切换的效果。
<transition
name='fade'
mode='in-out'>
<div v-if="cssanimate" key='hello'>hello css animate5</div>
<div v-else key='bye'>Bye css animate5</div>
</transition>
<button @click='cssclick'>css动画5</button>
//mode:来设置多个属性切换时的效果,in-out显示的元素先进来,
//隐藏的元素后隐藏,out-in隐藏的元素先隐藏,显示的元素再显示
那可能会出现没有动画效果的情况,这是因为DOM元素的复用导致的,不复用可以用在元素上加key值
我们也可以给transition加上mode属性,mode属性的作用是:
mode:来设置多个属性切换时的效果,in-out显示的元素先进来,隐藏的元素后隐藏, out-in隐藏的元素先隐藏,显示的元素再显示
二.在组件中如何使用过渡?
<transition
name='fade'
mode='in-out'>
<child-one v-if='cssanimate'></child-one>
<child-two v-else></child-two>
</transition>
<button @click='clickanimate'>css动画</button>
可以这样写,也可以用组件来判断
<transition
name='fade'
mode='in-out'>
<component :is='showcomponents'></component>
</transition>
<button @click='clickanimate'>css动画</button>
methods:{
clickanimate:function(){
this.showcomponents = this.showcomponents == 'childone'?'childtwo':'childone'
},
}