Animation 动画
Transition 过渡
使用 vus-trans 类作为 Transition 动画基础样式，默认 ease，速度 0.3s。
| 样式名称 | 描述 |
|---|---|
| fast | 快速 0.25s |
| slow | 缓慢 1s |
| linear | 定以相同速度开始至结束的过渡效果 |
| ease-in | 规定以慢速开始的过渡效果 |
| ease-out | 规定以慢速结束的过渡效果 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
默认
fast
slow
linear
ease-in
ease-out
ease-in-out
<div class="vus-trans"></div>
<div class="vus-trans fast"></div>
<div class="vus-trans slow"></div>
<div class="vus-trans linear"></div>
<div class="vus-trans ease-in"></div>
<div class="vus-trans ease-out"></div>
<div class="vus-trans ease-in-out"></div>
Animation 关键帧
使用 vus-anim 类作为 Animation 动画基础样式，默认 ease-out，速度 0.3s。
| 样式名称 | 描述 |
|---|---|
| fast | 快速 0.15s |
| slow | 缓慢 1.2s |
| linear | 动画从头到尾的速度是相同的 |
| ease | 动画以低速开始，然后加快，在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-in-out | 动画以低速开始和结束 |
| infinite | 规定动画无限次播放 |
| spin | 旋转 |
| spin-pulse | 脉动旋转 |
| flash | 闪烁 |
| fade-in | 逐渐(显示) |
| fade-out | 逐渐(隐藏) |
| up-slide-in | 向上滑动(显示) |
| up-slide-out | 向上滑动(隐藏) |
| up-min-slide-in | 向上滑动小(显示) |
| up-min-slide-out | 向上滑动小(隐藏) |
| down-slide-in | 向下滑动(显示) |
| down-slide-out | 向下滑动(隐藏) |
| down-min-slide-in | 向下滑动小(显示) |
| down-min-slide-out | 向下滑动小(隐藏) |
| left-slide-in | 向左滑动(显示) |
| left-slide-out | 向左滑动(隐藏) |
| right-slide-in | 向右滑动(显示) |
| right-slide-out | 向右滑动(隐藏) |
| min-zoom-in | 由小到大(显示) |
| min-zoom-out | 由小到大(隐藏) |
| max-zoom-in | 由大到小(显示) |
| max-zoom-out | 由大到小(隐藏) |
| up-zoom-in | 向上放大出现(贝塞尔) |
| down-zoom-in | 向下放大出现(贝塞尔) |
| left-zoom-in | 从左放大出现(贝塞尔) |
| right-zoom-in | 从右放大出现(贝塞尔) |
| flip | 翻转 |
| shake | 左右抖动 |
| bounce | 上下反弹跳动 |
| left-bounce-in | 左边反弹滑动(出现) |
| left-bounce-out | 左边反弹滑动(隐藏) |
| right-bounce-in | 右边反弹滑动(出现) |
| right-bounce-out | 右边反弹滑动(隐藏) |
| rubber-band | 拉橡皮 |
<div class="vus-anim"></div>
<div class="vus-anim fast"></div>
<div class="vus-anim slow"></div>
<div class="vus-anim flip"></div>
<div class="vus-anim up-zoom-in"></div>
<div class="vus-anim spin"></div>
<div class="vus-anim rubber-band"></div>