<transition>

• Props：

  • name-string用于自动生成 CSS 过渡类名。例如：name:'fade'将自动拓展为.fade-enter，.fade-enter-active等。
  • appear-boolean，是否在初始渲染时使用过渡。默认为false。
  • persisted-boolean。如果是 true，表示这是一个不真实插入/删除元素的转换，而是切换显示/隐藏状态。过渡钩子被注入，但渲染器将跳过。相反，自定义指令可以通过调用注入的钩子(例如v-show)来控制转换。
  • css-boolean。是否使用 CSS 过渡类。默认为true。如果设置为false，将只通过组件事件触发注册的 JavaScript 钩子。
  • type-string。指定过渡事件类型，侦听过渡何时结束。有效值为"transition"和"animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
  • mode-string控制离开/进入过渡的时间序列。有效的模式有"out-in"和"in-out"；默认同时进行。
  • duration-number |{ enter : number, leave : number}。指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个transitionend或animationend事件。
  • enter-from-class-string
  • leave-from-class-string
  • appear-class-string
  • enter-to-class-string
  • leave-to-class-string
  • appear-to-class-string
  • enter-active-class-string
  • leave-active-class-string
  • appear-active-class-string

• 事件：

  • before-enter
  • before-leave
  • enter
  • leave
  • appear
  • after-enter
  • after-leave
  • after-appear
  • enter-cancelled
  • leave-cancelled(仅v-show)
  • appear-cancelled
• 用法：<transition>元素作为单个元素/组件的过渡效果。<transition>只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

<!-- 单个元素 -->
<transition>
	<div v-if="ok">toggled content</div>
</transition>

<!-- 动态组件 -->
<transition name="fade" mode="out-in" appear>
	<component :is="view"></component>
</transition>

<!-- 事件钩子 -->
<div id="transition-demo">
<transition @after-enter="transitionComplete">
	<div v-show="ok">toggled content</div>
</transition>
</div>

const app = Vue.createApp({
	...
	methods: {
		transitionComplete (el) {
		// 因为传递了'el'的DOM元素作为参数
		}
	}
	...
})

app.mount('#transition-demo')