element vue组件切换动画

template部分

<el-button @click="change('one')">one</el-button>
<el-button @click="change('tow')">tow</el-button>
<transition mode="out-in">
    <component :is="type"></component>
</transition>

vue部分

import one from './ItemOne'
import tow from './ItemTow'

export default {
  name: 'Test',
  components: {
    one,
    tow,
  },
  data() {
    return {
      type: 'one'
    }
  },
  created() {},
  mounted() {
    this.menuClick('ItemOne');
  },
  methods: {
    change(type) {
      this.type = type;
    }
  }
}

样式部分

  .v-enter, .v-leave-to {
    opacity: 0;
  }
  .v-enter-active,.v-leave-active {
    transition: opacity 0.2s;
  }