Daotin

简单总结Vue进入离开的过渡与动画

Vue

css过渡

一般只需要设置两个：

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

// 进入动画
.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动画

less
// 进入时动画
.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

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

初始渲染时的过渡

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

html
<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：当前元素先进行过渡，完成之后新元素过渡进入。
html
<transition name="fade" mode="out-in">
  <!-- ... -->
</transition>

列表过渡

使用 <transition-group> 组件。

进入/离开过渡

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

  • 默认方式
html
<transition>
    <!--...-->
</transition>

//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">{{ item }}</li>
</transition-group>

// css
.flip-list-move {
  transition: transform 1s;
}
  • move-class 属性
plain text
略

参考链接

（完）

Related posts