transition 过渡&动画

API (opens new window)

使用

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

文档中表明,添加过渡动画的前提有这几个

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件 (<component :is="currentView"></component>)
• 组件根节点

为以下六个时机设置合理的样式,vue 会在恰当的时机调用对应的样式 (进入:v-enter ,v-enter-active, v-enter-to) (离开:v-leave, v-leave -active ,v-leave -to)

过渡的类名

在进入/离开的过渡中，会有 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

css 动画 demo

组件中使用的示例

<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(100%, 0, 0)

JavaScript 钩子

可以在 attribute 中声明 JavaScript 钩子：

<template>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled"
    :css="false"
  >
    <!-- ... -->
  </transition>
</template>
<script>
// ...
methods: {
  // --------
  // 进入时
  // --------
  beforeEnter(el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter(el, done) {
    // ...
    done()
  },
  afterEnter(el) {
    // ...
  },
  enterCancelled(el) {// 过渡进入被取消时触发
    // ...
  },

  // --------
  // 离开时
  // --------
  beforeLeave(el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave(el, done) {
    // ...
    done()
  },
  afterLeave(el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled(el) {
    // ...
  }
}
</script>

在 transition 标签中直接使用 Props 和 Event

• 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

//html
<div id="transition-demo">
	<transition
      @after-enter="transitionComplete" name="fade" mode="out-in" appear
      enter-to-class='animate__animated animated__tada'>
    	<div v-show="ok">toggled content</div>
	</transition>
</div>

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

app.mount('#transition-demo')