Vue3.0破坏性变化----transition

transition类名变更

• v-enter→v-enter-from
• v-leave →v-leave-from

vue2.0transition的使用

<template>
  <div>
    <h1>动画测试</h1>
    <button @click="visible = !visible">切换</button>
    <transition name="fade">
      <div v-show="visible">这是一段文本</div>
    </transition>
  </div>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
<script>
export default {
  data() {
    return {
      visible: true,
    };
  },
};
</script>

vue3.0中transition的使用

<template>
  <div>
    <h1>动画测试</h1>
    <button @click="visible = !visible">
      {{ visible ? "点击隐藏" : "点击显示" }}
    </button>
    <transition name="fade">
      <div v-show="visible">这是一段文本</div>
    </transition>
  </div>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 2s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
<script lang='ts'>
import { defineComponent } from "vue";
export default defineComponent({
  data() {
    return {
      visible: true,
    };
  },
});
</script>
<style scoped>
</style>

很明显的对比，除了这个变化，使用方式跟vue2.0的一摸一样，这边不做赘述。