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

transition类名变更

  • v-enterv-enter-from
  • v-leavev-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的一摸一样,这边不做赘述。

推荐阅读更多精彩内容