父组件
<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>