VUE复习笔记18（进入/离开 & 列表过渡）

Vue在插入、更新、移除dom时，提供多种不同方式的应用过渡效果。
包括以下工具：
①在css过渡和动画中，自动应用css
②可以配合使用第三方 CSS 动画库，如 Animate.css
③在过渡钩子函数中使用 JavaScript 直接操作 DOM
④可以配合使用第三方 JavaScript 动画库，如 Velocity.js

单元素、组件的过渡

Vue提供了 transition 的封装组件。在下列情形中，可以给任何元素和组件添加进入/离开过渡

①条件渲染 (使用 v-if)
②条件展示 (使用 v-show)
③动态组件
④组件根节点

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

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

2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

过渡的类名

在 进入/离开 的过渡中， 会有6个 class 的切换:
①v-enter：定义进入的开始过渡状态，元素被插入之前生效，在元素被插入之后的下一帧删除。
②v-enter-active：定义进入过渡时生效的状态，在整个进入过渡的阶段中应用，在元素被插入之前生效，在动画完成之后删除，这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
③v-enter-to：2.1.8版及以上 定义进入过渡的结束状态。在元素被插入的下一帧生效，与此同时v-enter被移除，在过渡动画完成之后移除。
④v-leave:定义离开过渡的开始状态，在离开过渡时立刻触发，下一帧被删除。
⑤v-leave-active:定义离开过渡生效时的状态，在整个离开过渡的阶段中生效，在过渡动画完成后被删除，这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
⑥v-leave-to：定义离开过渡的结束状态，在离开过渡被触发的下一帧生效，同时 v-leave被删除，在过渡动画完成之后移除。

总结：

v-enter与v-leave-to一般就是用来定义元素的开始和结束状态。
v-enter-active和v-leave-active一般则是用来控制开始进入与最后离开的过程时间效果和控制函数，贝塞尔曲线等等。

image.png

对于这些过渡中的类名来说，如果你没有在 标签规定name的话，就默认是带 v 的前缀，例如 v-enter，v-leave，如果你使用了 ，那就会变成test-enter test-leave这样的形式了。

v-enter-active和v-leave-active 可以控制进入/离开过渡的不同的缓和曲线，在下面章节会有个示例说明。

css 过渡

最常用的过渡就是 css过渡。

  
    Toggle render
  
  
    
hello
  


new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

css 动画

css动画的用法同css过渡，区别是在动画中，v-enter 的节点插入 dom后，不会立即删除，而是在 animationend 事件触发时删除。

  Toggle 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.
  


new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

这里 带active的2个类分别定义了进入与离开的方式与状态时间。都调用了 bounce-in 动画，都是0.5s，leave状态使用了颠倒的动画效果 reserve。

自定义过渡类名

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

js钩子

可以在属性中声明js钩子

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。