【vue】vue2.x系列（二）之过渡&动画

一、背景

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

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

1、使用css实现过渡&动画原理：<transition>组件：上可设置自定义类名

通过在组件、元素进入/离开时自动添加不同的类名来实现效果；整个过程涉及6个类：

• v-enter：定义进入过渡的开始；
• v-enter-active：定义从开始进入到进入完成之间的过程，这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数；
• v-enter-to：2.1.8 版及以上定义进入过渡的结束状态**（一般不用我们写，默认就是显示）**；
• v-leave：定义离开过渡的开始状态**（一般不用我们写，默认就是显示）**；
• v-leave-active：定义从开始离开到离开完成之间的过程；
• v-leave-to：2.1.8 版及以上定义离开过渡的结束状态；

这6个类对应的用于自定义类名的属性名：

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

2、css 过度效果：通常按需给【v-enter、v-enter-active、v-leave-active、v-leave-to】这4个类名添加css过渡样式，实现元素、组件的过渡效果

  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
--------
name属性作用：修改这6个类名前缀，当需要动画的元素多的时候，类的样式就不会一样；
--------
.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
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

3、css 动画：通常就是给【v-enter-active、v-leave-active】这2个类名添加动画样式来实现动画效果；

<transition>
  <p v-if="show">hello</p>
</transition>

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

方式二：自定义类名：相当于在不同时期该自动添加这个类的时候，自动添加新赋值好的类名；然后通过引入对应的css文件起作用；
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight" //相当于这两个类名 在离开的时候会被加上
  >
    <p v-if="show">hello</p>
  </transition>

4、使用js钩子：也是放在<transition>组件中

只用 JavaScript 过渡，在 enter 和 leave 中必须使用 done 进行回调;
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
  v-bind:css=“false”
>
  <!-- ... -->
</transition>

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

  beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

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

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