前端队长の技术博客

  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>

过渡模式

<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 属性手动设置。

//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;
}

参考链接

(完)