Vue3过渡和动画（十三）

云牧code
6,489 阅读7分钟

1.transition组件

1.1.transition组件搭配过渡

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

React框架本身并没有提供任何动画相关的API，所以需要借助react-transition-group库

Vue中为我们提供一些内置组件和API来完成动画，利用它们我们可以方便的实现过渡动画效果

下面代码实现显示和隐藏，是不会有任何动画效果的，显得较为生硬

image-20220202095039546

如果我们希望给单元素或者组件实现过渡动画，可以使用 transition 内置组件来完成动画

image-20220202180812388

1.2.transition组件的原理

上面我们h2元素有了动画

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

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

1.3.过渡动画class

一共有 6 个应用于进入与离开过渡效果的 CSS 类

  1. v-enter-from：进入动画的起始状态。这个 CSS 类在元素插入之前添加，在元素插入完成后的下一帧移除
  2. v-enter-active：进入动画的生效状态，应用于整个进入动画阶段。这个 CSS 类在元素被插入之前被添加，在过渡/动画完成之后移除。这个类可以用来定义进入动画的持续时间、延迟与速度曲线类型
  3. v-enter-to：进入动画的结束状态。这个 CSS 类在元素插入完成后的下一帧被添加（也就是 v-enter-from 被移除的同时），在过渡/动画完成之后移除
  4. v-leave-from：离开动画的起始状态，在离开过渡效果被触发时立即添加，在一帧后被移除
  5. v-leave-active：离开动画的生效状态，应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡/动画完成之后移除。这个类可以用来定义离开动画的持续时间、延迟与速度曲线类型
  6. v-leave-to：离开动画的结束状态。这个 CSS 类在一个离开动画被触发后的下一帧被添加（也就是 v-leave-from 被移除的同时），在过渡/动画完成之后移除

image-20220202232725442

如果我们使用的是一个没有name的transition，那么所有的class是以 v- 作为默认前缀

如果我们添加了一个name属性，比如 <transition name="yun"></transition>那么所有的class会以 yun- 开头

1.4.transition组件搭配动画

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

image-20220202184329487

1.5.同时设置过渡和动画

Vue内部是在监听 transitionend 或 animationend ，到底使用哪一个取决CSS规则

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

如果同时使用过渡和动画可能有一方执行完成，一方还没有执行完成

在这种情况下，我们可以设置 type 属性为 animation 或者 transition 来明确的告知Vue监听的类型

image-20220202213532592 image-20220202215208617

1.6.显示的指定动画时间

我们也可以显示的来指定过渡的时间，通过 duration 属性

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

  • number类型：同时设置进入和离开的过渡时间
  • object类型：分别设置进入和离开的过渡时间

image-20220202213835414

1.7.过渡的模式mode

image-20220202214520165

我们可以发现两个元素做过渡动画切换显示隐藏的时候会同时做进入和离开的动画

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

  • in-out: 新元素先进行过渡，完成之后当前元素过渡离开
  • out-in: 当前元素先进行过渡，完成之后新元素过渡进入
image-20220202214805826

同样适用于动态组件的切换

image-20220202215351763

1.8.appear初次渲染

默认情况下，首次渲染没有动画，希望有可以增加一个属性appear

image-20220202215508575

2.animate.css动画库

上面手动一个个来编写这些动画，效率是比较低的

所以在开发中我们可能会引用一些第三方库的动画库，例如animate.css

Animate.css是一个已经准备好的、跨平台的动画库为我们的web项目，对于强调、主页、滑动、注意力引导非常有用

2.1.自定义过渡class

我们可以通过以下属性来自定义过渡类名

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

他们的优先级高于普通的类名

这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css. 结合使用十分有用

2.2.使用animate.css

  1. 安装animate.css库： npm install animate.css
  2. main.js导入animate.css库的样式： import "animate.css"
  3. 使用animation动画或者animate提供的类
image-20220202230712900 image-20220202230837631

3.gsap库

如果我们希望通过JavaScript来实现一些动画的效果，这个时候我们可以选择使用gsap库来完成

GSAP是The GreenSock Animation Platform（GreenSock动画平台）的缩写

它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的

3.1.JavaScript钩子

transition组件给我们提供了一些JavaScript钩子帮助我们监听动画执行到什么阶段了

image-20220202233207061 image-20220202233237687
  • 当我们使用JavaScript来执行过渡动画时，需要进行 done 回调，否则它们将会被同步调用，过渡会立即完成
  • 在使用仅由 JavaScript 执行的动画时添加 :css="false"，我们就全权自己负责控制什么时候过渡结束，除了性能稍好一些之外，还可以防止 CSS 规则意外地干扰过渡

3.2.gasp的使用

  1. 安装gsap库 npm install gsap
  2. 对应使用的组件导入gsap库 import gsap from "gsap";
image-20220202235432416

image-20220202235300810

gasp实现数字快速变化的动画效果

image-20220203000128320

4.列表过渡

上面的过渡我们都是针对单个节点和同一时间渲染多个节点中的一个

如果我们希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行，我们可以使用<transition-group>组件来完成

它有如下特点：

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

4.1.列表过渡移动基本案例

动画

新增和删除节点的动画相对比较容易做，但是如果删除之后其他列表元素没有重新排列动画

我们可以通过使用一个新增的 v-move 的class来完成动画，它会在元素改变位置的过程中应用

同样通过name来自定义前缀

<template>
  <div>
    <button @click="addNum">添加数字</button>
    <button @click="removeNum">删除数字</button>
    <button @click="shuffleNum">数字洗牌</button>

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


<script>
import _ from "lodash";

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);
    },
    shuffleNum() {
      this.numbers = _.shuffle(this.numbers);
    },
    randomIndex() {
      return Math.floor(Math.random() * this.numbers.length);
    },
  },
};
</script>

<style scoped>
.item {
  margin-right: 10px;
  display: inline-block;
}

.yun-enter-from,
.yun-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.yun-enter-active,
.yun-leave-active {
  transition: all 1s ease;
}

.yun-leave-active {
  position: absolute;
}

.yun-move {
  transition: transform 1s ease;
}
</style>

4.2.列表的交错过渡案例

我们来通过gsap的延迟delay属性，做一个交替消失的动画

列表交错消失 
<template>
  <div>
    <input v-model="keyword" />
    <transition-group
      tag="ul"
      :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", "yun", "mu", "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.3,
        onComplete: done,
      });
    },
    leave(el, done) {
      gsap.to(el, {
        opacity: 0,
        height: 0,
        delay: el.dataset.index * 0.3,
        onComplete: done,
      });
    },
  },
};
</script>

<style scoped></style>

5.Vue2过渡和动画

  1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

  2. 图示：image-20220203004257445

  3. 写法：

    1. 准备好样式：

      • 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
      • 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

    2. 使用<transition>包裹要过渡的元素，并配置name属性：

      <transition name="hello">
	<h1 v-show="isShow">你好啊！</h1>
</transition>

    3. 备注：若有多个元素需要过渡，则需要使用：<transition-group>，且每个元素都要指定key值。

avatar
文章
阅读
粉丝