进入过渡&离开过渡

1.1过渡class

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

1.v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除

2.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数

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

4.v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除

5.v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数

6.v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效（与此同时v-leave-from被删除），在过渡/动画完成之后移除

对于这些在过渡中切换的类名来说，如果使用一个没有名字的


   <transition>

，则v-是这些class名的默认前缀。如果使用了


   <transition name="my-transition">

，那么v-enter-from会替换为my-transition-enter-from。 v-enter-active和v-leave-active可以控制进入/离开过渡的不同的缓和曲线。

1.2CSS过渡

常用的过渡都是使用CSS过渡。

  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
/* 可以设置不同的进入和离开动画   */
/* 设置持续时间和动画函数        */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
1.3CSS动画
CSS动画用法同CSS过渡，区别是在动画中v-enter-from类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除。
.bounce-enter-active {
  animation: bounce-in 0.5s;
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
@keyframes bounce-in {
    transform: scale(0);
  50% {
    transform: scale(1.25);
  100% {
    transform: scale(1);
  <transition name="bounce">
    <p v-if="show">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis
      enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi
      tristique senectus et netus.
  </transition>
1.4自定义过渡class类名
我们可以通过以下attribute来自定义过渡类名：
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class
他们的优先级高于普通的类名，这对于Vue的过渡系统和其他第三方CSS动画库，如Animate.css结合使用十分有用。
1.5同时使用过渡和动画
Vue为了知道过渡的完成，必须设置相应的事件监听器。它可以是transitionend或animationend，这取决于给元素应用的CSS规则。如果使用其中任何一种，Vue能自动识别类型并设置监听。但是，在一些场景中，需要给同一个元素同时设置两种过渡动效，比如animation很快的被触发并完成了，而transition效果还没结束。在这种情况中，就需要使用type attribute并设置animation或transition来明确声明需要Vue监听的类型。
1.6显性的过渡持续时间
在很多情况下，Vue可以自动得出过渡效果的完成时机。默认情况下，Vue会等待其在过渡效果的根元素的第一个transitionend或animationend事件。然而也可以不这样设定——比如可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。
在这种情况下可以用transition元素组件上的duration prop定制一个显性的过渡持续事件（以毫秒计）：
<transition :duration="1000">...</transition>
也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
1.7JavaScript钩子
可以在attribute中声明JavaScript钩子：
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  :css="false"
  <!-- ... -->
</transition>
methods: {
  // --------
  // ENTERING
  // --------
  beforeEnter(el) {
    // ...
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter(el, done) {
    // ...
    done()
  afterEnter(el) {
    // ...
  enterCancelled(el) {
    // ...
  // --------
  // 离开时
  // --------
  beforeLeave(el) {
    // ...
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave(el, done) {
    // ...
    done()
  afterLeave(el) {
    // ...
  // leaveCancelled 只用于 v-show 中
  leaveCancelled(el) {
    // ...
这些钩子函数可以结合CSS transitions/animations使用，也可以单独使用。
当只用JavaScript过渡的时候，在enter和leave钩中必须使用done进行回调。否则，它们将被同步调用，过渡会立即完成。添加:css="false"，也会让Vue会跳过CSS的检测，除了性能略高之外，这可以避免过渡过程中CSS规则的影响。
2.初始渲染的过渡
可以通过appear attribute设置节点在初始渲染的过渡
<transition appear>
  <!-- ... -->
</transition>
3.多个元素的过渡
关于多个组件之间的过渡，对于原生标签可以使用v-if/v-else-if/v-else。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：
<transition>
  <table v-if="items.length > 0">
    <!-- ... --> 
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>
实际上，通过使用v-if/v-else-if/v-else或将单个元素绑定到一个动态property，可以在任意数量的元素之间进行过渡，
<transition>
  <button v-if="docState === 'saved'" key="saved">
  </button>
  <button v-else-if="docState === 'edited'" key="edited">
  </button>
  <button v-else-if="docState === 'editing'" key="editing">
    Cancel
  </button>
</transition>
3.1过渡模式
还有一个问题，在两个按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是transition元素的默认行为——进入和离开同时发生。有时这很有效，例如当过渡项绝对位于彼此的top时：
#demo {
  position: relative;
button {
  position: absolute;
同时生效的进入和离开的过渡不能满足所有要求，所以Vue提供了过渡模式：
in-out：新元素先进行过渡，完成之后当前元素过渡离开
out-in：当前元素先进行过渡，完成之后新元素过渡进入
你会发现out-in是大多属时候想要的状态。
<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>
通过添加一个attribute，我们修复原来的过渡而不必添加任何特殊style。我们可以用它来协调更具表现力的动作，例如折叠卡片。实际上是两个元素在彼此之间转化，但是由于开始状态和结束状态的比例是相同的：水平为0，它看起来就像一个流体运动。这种轻描淡写对于真实的UI微交互非常有用。
<transition name="flip" mode="out-in">
4.多个组件之间过渡
组件之间的过渡更简单——我们甚至不需要key属性。相反，我们包裹一个动态组件：
<transition name="component-fade" mode="out-in">
    <component :is="view"></component>
  </transition>
    认真专注自信自律
        11.0k
       粉丝
 
 目录
 展开
 
 
      1.单元素/组件的过渡
      1.1过渡class
      1.2CSS过渡
      1.3CSS动画
      1.4自定义过渡class类名
      1.5同时使用过渡和动画
      1.6显性的过渡持续时间
      1.7JavaScript钩子
      2.初始渲染的过渡
      3.多个元素的过渡
      3.1过渡模式