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/[email protected]" 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 })
    }
  }
})

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

单元素/组件过渡

猜你喜欢