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

一. Vue中多个元素的过渡

transition 标签 mode 属性：

• in-out：多个元素切换的时候，先显示再隐藏
• out-in：多个元素切换的时候，先隐藏再显示

<template>
  <div class="wrap">
    <transition mode="out-in">
      <div v-if="show" key="hello">hello</div>
      <div v-else key="world">world</div>
    </transition>
    <button @click="handleClick">切换显隐</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick() {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
.v-enter,.v-leave-to{
  opacity: 0;
}
.v-enter-active,.v-leave-active{
  transition: opacity 1s;
}
</style>

二. Vue中多个组件的过渡

父组件

<template>
  <div class="wrap">
    <h2>Vue中多个元素或组件的过渡</h2>
    <transition mode="out-in">
      <component :is="type"></component>
    </transition>
    <button @click="handleClick">切换显隐</button>
  </div>
</template>

<script>
//子组件地址仅供参考
import One from "../child/ChildOne.vue";
import Two from "../child/ChildTwo.vue";
export default {
  components: {
    One,
    Two,
  },
  data() {
    return {
      type: 'One',
    };
  },
  methods: {
    handleClick() {
      this.type = this.type == "One" ? "Two" : "One";
    },
  },
};
</script>
<style scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}
</style>

第一个子组件

<template>
  <div class="wrap">
      组件1
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style scoped>
</style>

第二个子组件

<template>
  <div class="wrap">
      组件2
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style scoped>
</style>