transition 过渡&动画

API

使用

需要设置动画的元素或组件要在外边包裹一个<transition>标签，设置自定义的name，vue 会根据元素的切换（进入/离开）过程添加相应的 css 类名，你可以自由地使用 css 类名来设置 css 过渡&动画。

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

各类名的生命周期

• 进入

  • v-enter 只存在于第一帧
  • v-enter-active 第一帧到最后一帧，结束后移除
  • v-enter-to 第二帧到最后一帧，结束后移除

• 离开

  • v-leave 只存在于第一帧
  • v-leave-active 第一帧到最后一帧，结束后移除
  • v-leave-to 第二帧到最后一帧，结束后移除

如果你使用一个没有name的<transition> ，则 v- 是这些类名的默认前缀。如果你使用了name="fade"，那么 v- 前缀会替换为 fade-。

css 过渡 demo

See the Pen vue的过渡动画 by lyc (@lyc) on CodePen.

css 动画 demo

See the Pen vue的动画 by lyc (@lyc) on CodePen.

组件中使用的示例

<template>
	<transition name="slide">
		<div class="add-song">
			...
		</div>
	</transition>
	<template></template
></template>

.add-song &.slide-enter-active, &.slide-leave-active transition: all 0.3s &.slide-enter, &.slide-leave-to transform: translate3d;