进入/离开&列表过渡总结

最新推荐文章于 2022-07-25 18:54:00 发布

原创

最新推荐文章于 2022-07-25 18:54:00 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

本文总结了Vue中的过渡效果，包括使用CSS过渡和动画，配合第三方库，JavaScript钩子函数，以及如何处理单元素、组件、列表的过渡。Vue提供了<transition>和<transition-group>组件，支持in-out、out-in过渡模式，以及动态组件和列表过渡。此外，还介绍了过渡的类名、显性持续时间和JavaScript钩子的使用。

概述

vue在插入、更新或移除dom时，提供多种不同方法的应用过渡效果，包括以下工具：

（1）在css过渡和动画中自动应用class

（2）可以配合第三方css动画库，如animate.css

（3）在过渡钩子函数中使用javascript直接操作dom

（4）可以配合第三方javascript动画库，如velocity.js

单元素/组件的过渡

vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加entering/leaving过渡

（1）条件渲染v-if

（2）条件展示v-show

（3）动态组件

（4）组件跟节点

例如：

<div id='demo'>
  <button v-on:click='show = !show'></button>
  <transition name='fade'>
    <p v-if='show'>hellp</p>
  </transition>
</div>
new Vue({
  el:"#demo",
  data: {
   show: true
  }
})
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0
}

当插入或删除包含在transition组件中的元素时，vue将会做以下处理

（1）自动嗅探目标元素是否应用了css过渡或动画，如果是，在恰当的时机添加、删除css类名

（2）如果过渡组件提供了javascript钩子函数，这些钩子函数将在恰当的时间被调用

（3）如果没有找到javascript钩子并且没有检测到css过渡、动画，dom操作在下一帧立即执行

1.过渡的类名

在进入、离开的过渡中，会有6个class切换

（1） v-enter :定义进入过渡的开始阶段，在元素被插入时生效，在下一帧移除

（2）v-enter-active:定义过渡的状态。在元素整个过渡过程中作用，在元素插入时生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数

（3）v-enter-to:定义进入过渡的结束状态，在元素被插入下一帧后生效（与此同时v-enter被删除），在transtion/animation完成之后移除

（4）v-leave:定义离开过渡的开始状态。在离开过渡过程中作用，在下一帧移除

（5）v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

（6）v-leave-to:定义离开过渡的结束状态。在离开过渡被触发一帧后生效，在transition/animation完成后移除

css过渡

常用的过渡都是使用css过渡

<div id='example-1'>
  <button @click='show = !show'>
    Toggle Render
  </button>
  <transition name='slide-fade'>
    <p v-if='show'>hello</p>
  </transtion>
</div>
new Vue({
  el:'#example-1',
  data: {
    show: true
  }
})
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1.0, 0.5, 0.8, 1.0)
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0
}

css动画

css动画用法同css过渡