Vue学习笔记--状态间过渡

 

 

当从 DOM 中插入、更新或移除项目时，Vue 提供多种应用过渡效果的方式。包括以下工具：

• 在 CSS 过渡和动画中自动处理 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

vue提供了一个transition外层包裹容器组件，可以给条件渲染（v-for）、条件展示（v-show）、动态组件和组件根节点添加进入（enter）和离开（leave）过渡。

单元素/组件过渡

     1.通过css样式实现过渡动画，在css样式中可以通过transform和animation属性来定义动画效果。

<template>
  <div>
    <button @click="show=!show">点击</button>
    <transition name="fade">
      <p v-if="show">Hello</p>
    </transition>
  </div>
</template>

     在css样式中通过class类名与transition的name值关联，设置过渡效果

 .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

注：有6种class名来处理过渡的过程

   1、v-enter：进入式过渡的开始状态，作用于开始的一帧

   2、v-enter-active：进入式过渡的激活状态，作用于整个过程

   3、v-enter-to：进入式过渡的结束状态，作用于结束的一帧（仅适应于2.1.8+）

   4、v-leave：离开式过渡的开始状态，作用于开始的一帧

   5、v-leave-active：离开式过渡的激活状态，作用于整个过程

   6、v-leave-to：离开式过渡的结束状态，作用于结束的一帧（仅适应于2.1.8+）

2、自定义过渡的class类名：使用第三方css动画库

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"//tada和boundceOutRight是css动画库里的类名
  >
    <p v-if="show">hello</p>
  </transition>
</div>

3、显示过渡的持续时间

<transition :duration="1000">...</transition>
//还可以为进入式和离开式持续时间指定不同的值
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

4、javaScript钩子函数：使用第三方javaScript动画库：Velocity.js

在仅使用javaScript的过渡显式添加v-bind：css="false",以便Vue可以跳过css侦测。

<script src="https://lib.baomitu.com/velocity/1.2.3/velocity.min.js"></script>
<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>

在使用enter和leave钩子函数中，必须有done回调函数，否则，这两个钩子函数会被同步调用，过渡会立即完成；

new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})

状态间过渡具体使用场景

  1、在初始渲染时过渡：在transition标签内添加appear属性

          默认情况下会使用特定过渡，如果想要添加自定义的样式可以通过appear-class来绑定类名初始渲染进入时刻效果，appear-active-class绑定整个过程的效果，appear-to-class绑定结束状态效果。也可以自定义指定javaScript钩子事件，v-on:before-appear，v-on:appear、v-on:after-apprar和v-on:appear-cancelled。

2、多元素之间的切换效果

      通过v-if和v-else来对初始状态进行切换，当在具有相同标签名之间切换时，需要给标签添加一个唯一的key属性，便于区分。

不同元素间的切换：

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>

相同标签名之间的切换需要添加key属性：

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

注：两个按钮会同步渲染 - 当一个过渡进入时，另一个过渡离开。这是 <transition> 的默认行为 - 进入和离开同时发生。不过如果是绝对定位或者将元素位移时就像是滑动效果。若同时生效不能满足需求，transition还提供了过渡模式mode属性，属性值为out-in或者in-out。

3、多组件之间的过渡

不需要使用key属性，使用动态组件component，通过v-show绑定值，控制显示内容。

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})

.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active 在低于 2.1.8 版本中 */ {
  opacity: 0;
}