前端队长の技术博客

1. css过渡
2. css动画
3. 自定义过渡的类名
4. 初始渲染时的过渡
5. 过渡模式
6. 列表过渡
   1. 进入/离开过渡
   2. 排序过渡
7. 参考链接

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"></span>
</transition-group>

排序过渡

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

• 默认方式 ```html

//css .v-move { transition: all 1s; }

- 通过 `name` 属性来自定义前缀

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

// css
.flip-list-move {
  transition: transform 1s;
}

• move-class 属性

略

参考链接

• https://github.com/Daotin/fe-get-start/blob/master/16-Vue/04-%E5%8A%A8%E7%94%BB.md
• https://cn.vuejs.org/v2/guide/transitions.html

（完）

This site is open source. Improve this page.