vue过渡和动画

目录

1.animate.css动画库

安装和使用

安装

基本用法 

CSS 自定义属性（CSS 变量）

延迟等级

慢、慢、快、快的类

重复上课

2.vue-kinesis

演示

Vue3 - 安装

Vue3 - 默认导入

Vue2 - 安装

Vue2 - 默认导入

浏览器

用法

道具

运动容器

运动元件

kinesis-audio

从 vue-mouse-parallax 迁移

组件

道具

属性值

---

1.animate.css动画库

安装和使用

安装

$ npm install animate.css --save

或者使用Yarn安装（这只能与适当的工具（如Webpack，Parcel等）一起使用。如果您没有使用任何工具来打包或捆绑您的代码，则只需使用下面的CDN方法：

$ yarn add animate.css

将其导入到您的文件中：

import 'animate.css';

或者使用 CDN 将其直接添加到您的网页中：

基本用法 

安装 Animate.css后，将类添加到元素中，以及任何动画名称（不要忘记前缀！animate__animatedanimate__

<h1 class="animate__animated animate__bounce">An animated elementh1>

就是这样！你有一个CSS动画元素。超！

动画可以改善界面的用户体验，但请记住，它们也会妨碍您的用户！请阅读最佳实践和陷阱部分，以最佳方式使您的网络内容栩栩如生。

用@keyframes

即使该库为您提供了一些帮助程序类（如该类）以帮助您快速运行，您也可以直接使用提供的动画。这提供了一种将 Animate.css用于当前项目的灵活方法，而无需重构 HTML 代码。animatedkeyframes

例：

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

请注意，某些动画依赖于动画类上设置的属性。更改或不声明可能会导致意外结果。animation-timing

CSS 自定义属性（CSS 变量）

从版本 4 开始，Animate.css 使用自定义属性（也称为 CSS 变量）来定义动画的持续时间、延迟和迭代。这使得 Animate.css非常灵活且可定制。需要更改动画持续时间？只需全局或本地设置新值即可。

例：

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

自定义属性还使动态更改动画的所有时间受限属性变得容易。这意味着你可以使用javascript单行线产生慢动作或延时效果：

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

尽管某些老化的浏览器不支持自定义属性，但 Animate.css 提供了适当的回退，从而扩大了对支持 CSS 动画的任何浏览器的支持。

延迟等级

您可以直接在元素的 class 属性上添加延迟，如下所示：

<div class="animate__animated animate__bounce animate__delay-2s">Examplediv>

Animate.css 提供以下延迟：

类名	默认延迟时间
animate__delay-2s	2s
animate__delay-3s	3s
animate__delay-4s	4s
animate__delay-5s	5s

提供的延迟为 1 到 5 秒。您可以自定义它们，将属性设置为更长或更短的持续时间：--animate-delay

/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

慢、慢、快、快的类

您可以通过添加这些类来控制动画的速度，如下所示：

<div class="animate__animated animate__bounce animate__faster">Examplediv>

类名	默认速度时间
animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

该类的缺省速度为 。您还可以通过属性全局或本地自定义动画持续时间。这将影响动画和实用程序类。例：animate__animated1s--animate-duration

/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;
}

/* Only this element will take half the time to finish */
.my-element {
  --animate-duration: 0.5s;
}

请注意，某些动画的持续时间小于 1 秒。当我们使用 CSS 函数时，通过属性设置持续时间将遵循这些比率。因此，当您更改全局持续时间时，所有动画都将响应该更改！calc()--animation-duration

重复上课

您可以通过添加这些类来控制动画的迭代计数，如下所示：

<div class="animate__animated animate__bounce animate__repeat-2">Examplediv>

类名	默认迭代计数
animate__repeat-1	1
animate__repeat-2	2
animate__repeat-3	3
animate__infinite	infinite

与延迟和速度类一样，该类基于该属性，并且具有默认的小版本计数 。您可以通过将属性设置为更长或更短的值来自定义它们：animate__repeat--animate-repeat1--animate-repeat

/* The element will repeat the animation 2x
   It's better to set this property locally and not globally or
   you might end up with a messy situation */
.my-element {
  --animate-repeat: 2;
}

请注意，不使用任何自定义属性，并且 更改为 将不起作用。不要忘记阅读最佳实践部分，以充分利用重复动画。animate__infinite--animate-repeat

2.vue-kinesis

易于使用的 Vue.js组件，用于创建交互式动画

演示

Kinesis Demo

Vue3 - 安装

npm install --save vue-kinesis@next

Vue3 - 默认导入

安装所有组件：

import { createApp } from "vue";
import App from "./App.vue";
import VueKinesis from "vue-kinesis";

const app = createApp(App);
app.use(VueKinesis);

app.mount("#app");

Vue2 - 安装

npm install --save vue-kinesis

Vue2 - 默认导入

安装所有组件：

import Vue from 'vue'
import VueKinesis from 'vue-kinesis'

Vue.use(VueKinesis)

使用特定组件：

import Vue from 'vue'
import { KinesisContainer, KinesisElement } from 'vue-kinesis'

Vue.component('kinesis-container', KinesisContainer)
Vue.component('kinesis-element', KinesisElement)

浏览器

<script src="vue.js">script>
<script src="vue-kinesis.min.js">script>

用法

如何使用

道具

运动容器

支柱	类型	默认值	描述
积极	布尔	真	启用或禁用交互
期间	数	1000	视差动画的速度（以毫秒为单位）
宽松	字符串	“立方贝塞尔（0.23， 1， 0.32， 1）”	缓和视差动画
标记	字符串	迪夫	采用任何有效的 html 标记
事件	字符串	“移动”	容器将对其做出反应的事件。可能的值为“移动”和“滚动”
透视	数	1000	适用于“深度”视差类型
音频	字符串		指向音频文件的路径
播放音频	布尔		启动/停止附加的音频文件

运动元件

支柱	类型	默认值	描述
强度	数	10	运动效果的强度
类型	字符串	“翻译”	平移 - 旋转 - 缩放 - 缩放 X - 缩放 - 深度 - depth_inv
标记	字符串	“div”	采用任何有效的 html 标记
转换起源	字符串	“中心”	类似于 CSS 转换源属性
起源X	数	50	运动相对于容器的原点，位于 X 轴上。50 是容器的中心，0 是左侧，100 是右侧。
起源Y	数	50	运动相对于容器的原点，位于 Y 轴上。50 是容器的中心，0 是顶部，100 是底部。
轴	字符串	零	将移动限制在一个轴上。可能的值：“x” - “y”
最大X	数	零	限制 X 轴上运动的最大范围
最大Y	数	零	限制 Y 轴上移动的最大范围
最小值	数	零	限制 X 轴上移动的最小范围
最小Y	数	零	限制 Y 轴上移动的最小范围
周期	数	0	运动将重复多少次

kinesis-audio

Prop	Type	Default Value	Description
audioIndex	Number	50	To which frequency to react, on a range of integer values that goes from 0 to 127.
strength	Number	10	Strength of the motion effect
type	String	"translate"	translate - rotate - scale - scaleX - scaleY - depth - depth_inv
tag	String	"div"	Takes any valid html tag
transformOrigin	String	"center"	Similar to the CSS transform-origin property
originX	Number	50	The motion's origin relative to the container, on the X axis. 50 being the center of the container, 0 the left side, 100 the right side.
originY	Number	50	The motion's origin relative to the container, on the Y axis. 50 being the center of the container, 0 the top side, 100 the bottom side.
axis	String	null	Constrain the movement to one axis. Possible values: "x" - "y"
最大X	数	零	限制 X 轴上运动的最大范围
最大Y	数	零	限制 Y 轴上移动的最大范围
最小值	数	零	限制 X 轴上移动的最小范围
最小Y	数	零	限制 Y 轴上移动的最小范围
周期	数	0	运动将重复多少次

从 vue-mouse-parallax 迁移

从 vue-mouse-parallax 迁移非常容易：

组件

• 视差容器->运动-容器
• 视差元件->动能元件

道具

• 视差强度->强度
• 动画持续时间 -> 持续时间

属性值

• 翻译 -> 翻译
• 旋转 -> 旋转