基本用法

1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来
<transition>
    <h3 v-if="isShow">我是底部</h3>
</transition>
2. 自定义两组样式，来控制 transition 内部的元素实现动画

/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入
v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */

.v-enter,
.v-leave-to {
    transform: translate(300px, 0);
    opacity: 0;
}

/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */

.v-enter-active,
.v-leave-active {
    transition: all 1s ease-in;
}

自定义前缀

如果不想要 v- 前缀的动画，可以在transition标签上添加name属性，自定义前缀：

<transition name="sw">...</transition>
.sw-enter,
.sw-leave-to {
    transform: translate(300px, 0);
    opacity: 0;
}
...

使用第三方 CSS 库

1. 导入动画类库

<link rel="stylesheet" type="text/css" href="./lib/animate.css">

1. 定义 transition 及属性

<!-- 入场 bounceIn    离场 bounceOut -->
<!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 -->
<transition 
  enter-active-class="bounceIn" 
  leave-active-class="bounceOut" 
  :duration="500">
    <h3 v-if="isShow" class="animated">我是底部</h3>
</transition>

<!-- 使用  :duration="{ enter: 200, leave: 400 }"  来分别设置 入场的时长 和 离场的时长  -->
<transition
	enter-active-class="fadeInRight"
  leave-active-class="fadeOutRight"
  :duration="{ enter: 500, leave: 800 }">
  	<div class="animated" v-show="isshow">动画哦</div>
</transition>

使用动画钩子函数

1. 定义 transition 组件以及三个钩子函数

<div id="app">
    <input type="button" value="切换动画" @click="isshow = !isshow">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div v-if="isshow" class="show">OK</div>
    </transition>
  </div>

1. 定义三个 methods 钩子方法

methods: {
  // 动画钩子函数第一个参数el，表示要执行动画的那个DOM元素，是原生JS的DOM对象
  // 可以认为el是通过 document.getElementById('')方式获取到的
  beforeEnter(el) { // 动画之前的回调
    // 在此处可以设置元素动画起始位置
    el.style.transform = 'translateX(500px, 0)';
  },
  enter(el, done) { // 动画完成时候的回调
    // 这句话没有实际作用，但是不写会造成没有动画效果
    // 可以认为el.offsetWidth 会强制动画刷新
    el.offsetWidth;
    // 此处可以设置元素动画结束状态的位置
    el.style.transform = 'translateX(0px)';
    // 必须调用。这里的done，就是 afterEnter 函数，也就是说 done 是 afterEnter 函数的引用
    done();
  },
  afterEnter(el) { // 动画完成之后的回调
    this.isshow = !this.isshow;
  }
}

1. 定义动画过渡时长和样式

.show {
  transition: all 0.4s ease;
}

v-for 列表动画（transition-group）

在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染的，不能使用 transition