vue内置组件Transition的示例详解

<script setup>
import { ref } from 'vue'
const keyValue = ref(1)
</script>
<template>
  <button @click="() =>keyValue = Math.random()">Toggle</button>
  <Transition >
    <p :key="keyValue">hello</p>
  </Transition>
</template>
<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

<Transition name="a">
  ...
</Transition>

.a-enter-active,
.a-leave-active {
  transition: opacity 0.5s ease;
}
.a-enter-from,
.a-leave-to {
  opacity: 0;
}

<Transition name="fade">
  <div v-if="show" class="outer">
    <div class="inner">
      Hello
    </div>
  </div>
</Transition>

/* 应用于嵌套元素的规则 */
.fade-enter-active .inner,
.fade-leave-active .inner {
  transition: all 0.3s ease-in-out;
}
.fade-enter-from .inner,
.fade-leave-to .inner {
  transform: translateX(30px);
  opacity: 0;
}

<Transition :duration="550">...</Transition>

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
...
<<Transition>

<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script>
<template>
  <!-- 包装内置的 Transition 组件 -->
  <Transition
    name="my-transition"
    @enter="onEnter"
    @leave="onLeave">
    <slot></slot> <!-- 向内传递插槽内容 -->
  </Transition>
</template>
<style>
</style>

<MyTransition>
  <div v-if="show">Hello</div>
</MyTransition>