vue transition 多个元素 多个组件 动态组件 做动画

 父组件

<template><div><button @click="change"> 触发动画</button><!-- 加key是为了dom不复用  mode="out-in"> --><!-- <p>vue 使用多个元素中的动画</p> --><!-- <transition mode="out-in"><div class="div" v-if="show" key="hello">hello</div><div v-else key="word">word</div></transition> --><!-- <p>vue 多个组件动画</p><transition mode="out-in"><b1 v-if="show"></b1><c v-else></c>    </transition> --><p>vue 中动态组件动画</p><transition mode="out-in"><component :is="type"></component></transition></div>
</template><script type="text/ecmascript-6">
import b1 from './B'
import c1 from './C'
export default {data() {return {show: true,type: 'b1',}},methods: {change() {// 多个元素和多个组件动画时的表达式// this.show = !this.show// 动态组件动画时的表达式this.type = this.type === 'b1' ? 'c1' : 'b1'}},components: {b1,c1}
}
</script><style lang="scss">
// transition不写name 默认是v
.v-enter, .v-leave-to {opacity: 0;
}
.v-enter-active,.v-leave-active {transition: opacity 2s;
}</style>

子组件 B

<template><div><p>B组件</p></div>
</template><script type="text/ecmascript-6">
export default {mounted() {console.log('mounted b');},destroyed() {console.log('destoryed b');},
}
</script>

子组件C

<template><p>C组件</p>  
</template><script>
export default {}
</script>