简单总结Vue进入/离开过渡&动画-一一网

这是我参与更文挑战的第9天，活动详情查看：更文挑战

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。

以下正文：

css过渡

一般只需要设置两个：

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */

// 进入动画
.fade-enter-active {
  transition: all .3s ease;
}

// 离开动画
.fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

// 初始状态
.fade-enter, .fade-leave-to  {
  transform: translateX(10px);
  opacity: 0;
}
复制代码

css动画

// 进入时动画
.bounce-enter-active {
  animation: bounce .5s;
}
// 离开时动画
.bounce-leave-active {
  animation: bounce .5s reverse;
}

// 设置动画名称，初始样式，完结样式
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
复制代码

自定义过渡的类名

使用第三方css插件：Animate.css

<transition 
    enter-active-class="animated zoomIn" 
    leave-active-class="animated zoomOut" 
    :duration="{ enter: 200, leave: 400 }">
</transition>
复制代码

初始渲染时的过渡

可以通过 appear 属性设置节点在初始渲染的过渡。

<transition
  appear
  appear-class="custom-appear-class"  // 载入开始样式
  appear-to-class="custom-appear-to-class"  // 载入结束样式(2.1.8+)
  appear-active-class="custom-appear-active-class" // 载入过程动画
>
  <!-- ... -->
</transition>
复制代码

过渡模式

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<transition name="fade" mode="out-in">
  <!-- ... -->
</transition>
复制代码

列表过渡

使用 <transition-group> 组件。

进入/离开过渡

<transition-group name="list">
    <span v-for="item in items" v-bind:key="item" class="list-item">{{ item }}</span>
</transition-group>
复制代码

排序过渡

只需了解新增的 v-move属性，它会在元素的改变定位的过程中应用。
像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。

默认方式

<transition>
    <!--...-->
</transition>

//css
.v-move {
    transition: all 1s;
}
复制代码

通过 name 属性来自定义前缀

<transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">{{ item }}</li>
</transition-group>

// css
.flip-list-move {
  transition: transform 1s;
}
复制代码