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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="xugaoyi" data-slug-hash="jOPqxvm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue的过渡动画">
  <span>See the Pen <a href="https://codepen.io/xugaoyi/pen/jOPqxvm">
  vue的过渡动画</a> by xugaoyi (<a href="https://codepen.io/xugaoyi">@xugaoyi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

css动画 demo

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="xugaoyi" data-slug-hash="qBdZyRR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue的动画">
  <span>See the Pen <a href="https://codepen.io/xugaoyi/pen/qBdZyRR">
  vue的动画</a> by xugaoyi (<a href="https://codepen.io/xugaoyi">@xugaoyi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

组件中使用的示例

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

 .add-song
    &.slide-enter-active, &.slide-leave-active
      transition: all 0.3s
    &.slide-enter, &.slide-leave-to
      transform: translate3d(100%, 0, 0)