• transition
• 渐进过渡

vue 刚开始只是一个库，提供语法糖，它带来了数据与视图的双向绑定，简化了前端开发人员频繁操作 DOM 的繁琐，随着 vue 生态圈的发展，包括 vue-cli、vue-router、vuex 的产生，以及其他一些开发者开发的以 vue 为核心的组件库，UI库，服务端渲染等等的诞生，vue 已经是现在最流行的前端框架之一了。

vue 2.x 相较于 vue 1.x 核心不变，但还是有着很多的地方的改动，包括很多 API 的废除，以及提供很多新的 API 。包括性能提升等等…。具体可以看尤老师写的文章 Vue 2.0 发布了！，里面详细的介绍 vue 2.x 带了哪些令人激动的新功能。

当然了，从 vue 1.x 升级到 vue 2.x 的所有的变动在官方文档中都能查到。

那么，本文将提出几点常见的，以及我在从 vue 1.x 升级到 vue 2.x 的过程中遇到的问题和以及解决方案。

透过这篇文章，希望能帮助大家解决实际工作中最常用的从 vue 1.x 升级到 vue 2.x 需要注意的地方和 API 的改动。

transition

在 vue 1.x 中：
使用过度效果，需要在目标元素上使用 transiton 特性：

<div v-if="show" transition="my-transition"></div>

类名的添加和切换取决于 transition 特性的值，比如说你的 transition="fade" ，那么，就会有三个 CSS 类名：
1、.fade-transition 始终保留在元素上。（这一点和 vue 2.x 有明显的差别）
2、.fade-enter 定义进入过渡的开始状态。只应用一帧后立即删除。
3、.fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效，在它结束后删除。

例如：

<div if="show" transition="expand">hello</div>

/* 必需*/
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

// 这里我们定义了动画开始的状态，以及过渡的状态，动画最终的状态就是这个元素自己本身的样式

在 vue 2.x 中：
transition 的用法还是有很大区别的。
首先，它不像 vue 1.x 那样写在目标元素上，而是 Vue 提供了 transition 的封装组件。

<transition name="fade" mode="out-in" appear>
  <div v-if="ok">toggled content</div>
</transition>

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。

相较于 vue 1.x 中的 3 个 css 过渡类名（v-transition、v-enter、v-leave），vue 2.x 中有 6 个 class 切换。
1、v-enter
2、v-enter-active ： 定义过渡状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。（这个类似 vue 1.x 中的 v-transition ，但是不同 vue 1.x 中的是，它会在动画完成之后移除）
3、v-enter-to ：2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除 ），在 transition/animation 完成之后移除。
4、v-leave ： 类似 v-enter
5、v-leave-active ： 类似 v-enter-active
6、v-leave-to ： 类似 v-enter-to

渐进过渡

在 vue 1.x 中：
transition 与 v-for 一起用时可以创建渐进过渡。给过渡元素添加一个特性 stagger、enter-stagger 或 leave-stagger；

<div v-for="item in list" transition="stagger" stagger="100"></div>

详情看官方文档：vue 1.x 渐进过渡

在 vue 2.x 中：
就移除了 stagger ，如果希望在列表渲染中使用渐进过渡，可以通过设置元素的 data-index（或类似属性）来控制时间。

与此同时，vue 2.x 中添加了 <transition-group> 组件用来渲染整个列表，与 <transition> 区分开。

还添加了一个新特性 v-move 用来处理列表的排序过渡效果。这都是与 vue 1.x 不相同的地方