LynDocs

外观

Vue3实现动画 ​

动画 ​

Transition ​

在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验：

  • React 框架本身并 没有提供任何动画相关的 API，所以在 React 中使用过渡动画我们需要使用一个 第三方库：react-transition-group
  • Vue 中为我们提供 一些内置组件和对应的 API 来完成动画，利用它们我们可以 方便的实现过渡动画效果

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

  • 条件渲染（使用 v-if）条件展示（使用v-show）
  • 动态组件
  • 组件根节点
image-20220708152050089image-20220708152052441

Transition 组件的原理

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

  1. 自动嗅探 目标元素是否应用了 CSS 过渡或者动画，如果有，那么 在恰当的时机添加/删除 CSS 类名
  2. 如果 transition 组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用
  3. 如果 没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 插入、删除操作将被立即执行

过渡动画 class ​

事实上 Vue 就是帮助我们在这些 class 之间来回切换完成的动画：

  • v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除
  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数
  • v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除
  • v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数
  • v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/动画完成之后移除

image-20220708155920221

class 的 name 命名规则如下：

  • 如果我们使用的是一个没有 name 的 transition，那么所有的 class 是以 v- 作为默认前缀
  • 如果我们添加了一个 name 属性，比如：<transition name="why" >，那么所有的 class 会以 why- 开头

过渡css动画 ​

上面是通过 transition 来实现的动画效果，另外我们也可以通过 animation 来实现

image-20220708164652899image-20220708164656318

Vue 为了知道过渡的完成，内部是在监听 transitionend 或 animationend，到底使用哪一个取决于元素应用的 CSS 规则：

  • 如果我们只是使用了其中的一个，那么 Vue 能自动识别类型并设置监听

如果我们同时使用了过渡和动画呢？

  • 可能出现 某一个动画执行结束时，另一个动画还没有结束
  • 在这种情况下，我们可以 设置 type 属性为 animation 或者 transition 来明确告知 Vue 监听的类型
html
<transition name="why" type="transition">
  <h2 v-if="isShow">Hello World</h2>
</transition

其他属性 ​

显示的指定动画时间

duration 可以设置两种类型的值：

  • number 类型：同时设置进入和离开的过渡时间
  • object 类型：分别设置进入和离开的过渡时间
html
<transition name="why" type="transition" :duration="{ enter: 800, leave: 1000 }">
  <h2 v-if="isShow">Hello World</h2>
</transition

过渡模式 mode

当前的动画在两个元素之间切换的时候存在的问题：

image-20220708171833442

我们会发现 Hello World 和 你好啊，李银河是同时存在的：

  • 这是因为默认情况下 进入和离开动画 是同时发生的

我们不希望同时执行进入和离开动画，那么我们需要设置 transition 的过渡模式：

  • in-out: 新元素先进行过渡，完成之后当前元素过渡离开；
  • out-in: 当前元素先进行过渡，完成之后新元素过渡进入
html
<transition name="why" mode="out-in">
  <h2 class="title" v-if="isShow">Hello World</h2>
  <h2 class="title" v-else>你好啊,李银河</h2>
</transition>

动态组件切换 ​

首次渲染的时候是没有动画的，如果我们希望给他添加上去动画，那么就可以增加另外一个属性 appear

html
<transition name="why" mode="out-in" appear>
  <component :is="isShow ? 'home' : 'about'"></component>
</transition>

动画库 ​

animate.css ​

animate-css

animate-css 测试效果

如何使用Animate库呢？

  1. 第一步：安装 animate.css 库

    bash
    npm install animate.css

  2. 第二步：导入 animate.css 库的样式

    js
    // main.js
import 'animate.css'

  3. 第三步：使用 animation 动画或者 animate 提供的类

自定义过渡 class

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class

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

html
<transition
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__flipInY"
>
  <h2 class="title" v-if="isShow">Hello World</h2>
</transition>

gasp ​

某些情况下我们希望通过 JavaScrip t来实现一些动画的效果，这个时候我们可以选择使用 gsap 库来完成

  • GSAP 是 The GreenSock Animation Platform（GreenSock 动画平台）缩写
  • 他可以 通过 JavaScript 为 CSS 属性、SVG、Canvas 等设置动画，并且是浏览器兼容的
bash
npm install gsap
  • transition 组建给我们提供了很多 JavaScript 钩子，这些钩子可以帮助我们监听动画执行到什么阶段了

image-20220712104916185

  • 当我们使用 JavaScript 来执行过渡动画时，需要进行 done 回调，否则它们会被同步调用，过渡会立即完成
  • 添加 :css="false"，也会让 Vue 会跳过 CSSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响
html
<div><button @click="isShow = !isShow">显示/隐藏</button></div>
<transition @enter="enter" @leave="leave" :css="false">
  <h2 class="title" v-if="isShow">Hello World</h2>
</transition>

<script>
import gsap from 'gsap'

export default {
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    enter(el, done) {
      console.log('enter')
      gsap.from(el, {
        scale: 0,
        x: 200,
        onComplete: done
      })
    },
    leave(el, done) {
      console.log('leave')
      gsap.to(el, {
        scale: 0,
        x: 200,
        onComplete: done
      })
    }
  }
}
</script>

数字快速变化的动画效果，这个动画可以很容易通过 gsap 来实现

html
<input type="number" step="100" v-model="counter" />
<h2>当前计数: {{ showNumber.toFixed(0) }}</h2>

<script>
import gsap from 'gsap'

export default {
  data() {
    return {
      counter: 0,
      showNumber: 0
    }
  },
  watch: {
    counter(newValue) {
      gsap.to(this, { duration: 1, showNumber: newValue })
    }
  }
}

transition-group ​

上面的过渡动画要么是对 单个节点 进行操作、要么是 同一时间渲染多个节点中的一个 进行操作。如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行，这时候我们要使用 <transition-group> 组件来完成

使用 <transition-group> 有如下的特点：

  • 默认情况下，它 不会渲染一个元素的包裹器，但是你可以 指定一个元素并以 tag attribute 进行渲染
  • 过渡模式不可用，因为我们不再相互切换特有的元素
  • 内部元素总是 需要提供唯一的 key attribute 值
  • CSS 过渡的类将会应用在内部的元素中，而 不是这个组/容器本身

新增删除重排 ​

新增和删除数字的过程中，对添加或移除的数字添加动画：

html
<button @click="addNum">添加数字</button>
<button @click="removeNum">删除数字</button>

<transition-group tag="p" name="why">
  <span v-for="item in numbers" :key="item" class="item">
    {{ item }}
  </span>
</transition-group>

<script>
export default {
  data() {
    return {
      numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      numCounter: 10
    }
  },
  methods: {
    addNum() {
      this.numbers.splice(this.randomIndex(), 0, this.numCounter++)
    },
    removeNum() {
      this.numbers.splice(this.randomIndex(), 1)
    },
    randomIndex() {
      return Math.floor(Math.random() * this.numbers.length)
    }
  }
}
</script>

<style scoped>
.item {
  margin-right: 10px;
  display: inline-block;
}
.why-enter-from,
.why-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.why-enter-active,
.why-leave-active {
  transition: all 1s ease;
}
</style>

虽然新增或删除的节点是有动画的，但是对于那些其他需要移动的节点是没有动画的

  • 我们可以通过使用一个 新增的 v-move 的 class 来完成动画
  • 它会 在元素改变位置的过程中 应用
  • 像之前的名字一样，我们可以通过 name 来自定义前缀
css
.why-leave-active {
  position: absolute;
}
.why-move {
  transition: transform 1s ease;
}

重排也会走这个动画

html
<button @click="shuffleNum">数字洗牌</button>

<script>
import _ from 'lodash'
export default {
  methods: {
    shuffleNum() {
      this.numbers = _.shuffle(this.numbers)
    }
  }
}
</script>

列表交错过渡 ​

html
<template>
  <div>
    <input v-model="keyword" />
    <transition-group
      tag="ul"
      name="why"
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <li v-for="(item, index) in showNames" :key="item" :data-index="index">
        {{ item }}
      </li>
    </transition-group>
  </div>
</template>

<script>
import gsap from 'gsap'

export default {
  data() {
    return {
      names: ['abc', 'cba', 'nba', 'why', 'lilei', 'hmm', 'kobe', 'james'],
      keyword: ''
    }
  },
  computed: {
    showNames() {
      return this.names.filter(item => item.indexOf(this.keyword) !== -1)
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter(el, done) {
      gsap.to(el, {
        opacity: 1,
        height: '1.5em',
        delay: el.dataset.index * 0.5,
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        opacity: 0,
        height: 0,
        delay: el.dataset.index * 0.5,
        onComplete: done
      })
    }
  }
}
</script>

常备不懈，才能有备无患