vue动画库（vue3 动画）

本篇文章给大家谈谈vue动画库，以及vue3 动画对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue3 transition 组件使用总结
• 2、09《Vue 入门教程》Vue 过渡 amp; 动画
• 3、在Vue中使用GSAP完成动画（二）动画初始设置

vue3 transition 组件使用总结

1.过渡的类名

在进入/离开的过渡游首滑中，会有 6 个 class 切换。

示例

动画库：animate.style

安装

过渡时间

duration ：动画的执行时间（芹谈以毫秒计）

分别指定进入和离开的持续时间：

transiton 生命周期8个

当只用 JavaScript 过渡的时候，在 enter 和 leave 钩子中必须使用 done 进行回调。

结合gsap 动画库使用 GreenSock

appear: 设置初始节点过渡，页面加载完神腊成就开始动画

09《Vue 入门教程》Vue 过渡 amp; 动画

本章节我们主要介绍 Vue.js 的过渡效果与动画效果。包括如何编写自定义 CSS 动画、如何配合第三方 CSS 动画库、过渡钩子函数的使用、如何使用第三方 JavaScript 动画库。本小节的内容相对之前有些难度，同学们在阅读一遍之后如果不能完全掌握，建议反复阅读，并把本小节的所有案例自己实现一遍，相信通过多次的练习一定可以掌握。

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具： 1、在 CSS 过渡和动画中自动应用 class； 2、配合使用第三方 CSS 动画库，如 Animate.css； 3、在过渡钩子函数中使用 JavaScript 直接操作 DOM； 4、配合使用第三方 JavaScript 动画库，如 Velocity.js。

使用 transition 组件包裹需要使用过渡效果的 DOM 元素。例如：

接下来让我们先看一个淡入淡出效果的实现代码：

实例演示

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：

那么，transition 组件是如何做到这样的过渡效果的呢？

我想，同学们肯定猜想到当元素切换状态的时候，我们定义的样式会作用于标签元素

。那么，到底是不是这样呢？

打开控制台，检索到

标签上，我们可以清晰地看到：

实际上 Vue 在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v 会替换为 test-transition。例如：test-transition-enter、test-transition-enter-active、test-transition-leave…

在日常开发中，我们经常会使用 CSS 过渡来实现一些简单的动画效果。接下来我们用一个示例来学习如何使用：

实例演示

"运行案例" 可查看在线运行效果

代码解释：

同样，我们可以使用 CSS 动画来实现元素的过渡效果。CSS 动画用法类似 CSS 过渡，在过渡的不同阶段对应的 Class 会作用于元素。但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。 相信同学们在日常业务开发中一定使用过 Dialog，接下来我们就使用 CSS 动画来实现它的过渡效果：

实例演示

"运行案例" 可查看在线运行效果

代码解释：

在之前的两个案例中，我们通过给 transition 设置 name 属性来指定元素在不同阶段的样式类名，中拦但有时候希望使用自定义的过渡类名，我们可以通过给 transition 设置以下属性来达到需求：

自定义过渡的类名优先级高于普通的类名，这样就能很好地与第三方（如：animate.css）的动画库结合使用。

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定 —— 比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相枯拦比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下你可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

你也可以定制进入和移出的持续时间：

transition 组件在过渡的不同阶段会触发相应的钩子函数：

这些钩子函数可以结合 CSS transitions/animations 使用，也卖败胡可以单独使用。

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false" ，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

接下来我们来看一个使用钩子函数和 Velocity.js 实现过渡动画的例子：

实例演示

"运行案例" 可查看在线运行效果

代码解释：

有时候我们希望给元素设置初始渲染的过渡效果，可以通过给 transition 设置 appear 的 attribute ：

这里默认和进入 / 离开过渡一样，同样也可以自定义 CSS 类名：

同样地，可以使用自定义 JavaScript 钩子：

接下来我们看一个完整的示例：

实例演示

"运行案例" 可查看在线运行效果

代码解释：

本小节我们介绍了如何使用 transition 实现过渡和动画效果，主要包括以下知识点：

[img]

在Vue中使用GSAP完成动画（二）动画初始设置

设置动画延迟时间

过渡效果的速度曲线，概念有点类似于 animation-timing-function

Tips: TweenLite中包含了基本缓动：Power0、Power1、Power2、Power3、Power4、Linear、Quad、Cubic、Quart、Quint、Strong，他们每个都含有.easeIn、.easeOut、.easeInOut参数（对于线性动画，请使用Power0.easeNone）。

而TweenMax在此基础上还另外增加了特殊缓动：Elastic、Back、Bounce、SlowMo、SteppedEase、RoughEase、Circ、Expo、Sine。

如果想在TweenLite中使用特殊缓动则需要加载缓动类easing/EasePack.min.js

如果设置为true，动画将在创建时立即暂停。默认false

是否立即渲染，默认为false

一般来说冲乱塌，TweenMax的运动对象会在下一个渲染周期前(也就是下一帧)被渲染到场景中，除非你设置了delay。如果想强制立即渲染，可以把这个参数设为true。

另外from()方法的运动对象是立即渲染的（默认true），如果你不想该运动对象被渲染，可以把这个参数设为false。

可以看到同样是3秒后从右边500px回到初始状态，绿色方块早已经在动画的 from 位置做好了等待，而橙色方块因为设置了不立即渲染，选择延迟结束以后就位!

用来控制同一个对象上有多个动画时的覆盖之类的情况

可以看到，一开始先执行 x:200 ， y:300 不被覆盖，3秒以后， overwrite 效果结束，覆盖失效，最后完成第一个动画剩下的3秒

最后两个属性这边先不做分析

当设置为true时，对这个TweenMax对象的时间计算方散圆式基于帧而不是秒，一般帧速约为16.66ms（60帧/秒）

此处省略

动画在第一次完成后应重复的次数。例如，如果repeat为1，则动画将总共播放两次（初始播放加1次重复）。要无限期重复，请使用-1。repeat应该始终是一个整数。

每次重复之间的秒数（或帧）。例如，如果repeat是2并且repeatDelay是1，则动画将首先播放，然后在重复之前等待1秒，然后再次播放，然后再等待1秒再进行最后的重复

首次立即执行，第二次重复的动画，按照 repeatDelay 设定的值等待1秒以后，再次执行

如果设置yoyo为true，那么重复的动画将往返进行。默认为false

例如当你设置了repeat:2，如果没设置yoyo，那么动画是这样的123-123-123

如果设置了yoyo，动画则是123-321-123

控制动画返回的速度曲线，如果设置为 true ，回转速度曲线与 ease 的参数相同

设置动画属性开始时的值

设置动画从 x:200 开始，再到后面的 x:500

在stagger（错开）动画中设定属性组

虽然stagger限定了动画目标使用相同的属性（如 x:100, rotation:90 ），但你可以使用 cycle 来设定一个属性组（如 cycle:{x:[100,-100], rotation:[30,60,90]} ），还可使用陪唯function关键词（如 {x:function() { return Math.random() * 200; }} ）

关于vue动画库和vue3 动画的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。