Vue中多个元素或组件的过渡

如果transition没有name=“fade”属性那么style生成的就是

.v-enter , v-leave-to{
opcity：0；
}
v-enter-active， v-leave-active{
transition：opcity 1s；
}

有的话

.fade-enter,fade-leave-to{

opcity：0；

} .fade-leave-active,fade-enter-active{

transition：opcity 1s；

}

 

关于mode配置参数，来设置多个属性切换的效果，in-out：先进入在隐藏；out-in：就是先隐藏在进入

<transition   mode="in-out">

<div v-if="show">hello world</div>

<div v-else>byeworld</div>

</transition>

 

 

多个组件切换的效果(/动态组件）

<transition   mode="in-out">

<conponent :is="type"></component>

</transition>

<button @click="change">change</button> Vue.component("child-one",{ template:`<div v-once>child-one</div>`, }) 
Vue.component("child-two",{ template:`<div v-once>child-two</div>`, }) //v-once把组件放到缓存里提高工作效率 
var app =new Vue({ el:"#app", data:{ type:'child-one' }, methods:{ change:function(){ this.type = (this.type==='child-one' ? 'child-two':'child-one'), } } })

 

转载于:https://www.cnblogs.com/yubaibai/p/10720990.html