JavaScript 集成

相关源文件

• docs/index.html
• docsSource/sections/01-usage.md
• docsSource/sections/02-utilities.md
• docsSource/sections/03-best-practices.md
• docsSource/sections/04-javascript.md
• docsSource/sections/06-migration.md
• docsSource/sections/09-contributors.md
• docsSource/template.html

本文档提供了如何使用 Animate.css 和 JavaScript 的全面指南。虽然 Animate.css 主要是一个 CSS 库，但将其与 JavaScript 结合可以实现动态动画控制、事件处理和程序化动画序列。

概述

JavaScript 集成允许您

• 动态添加和删除动画类
• 检测动画何时开始和结束
• 以编程方式控制动画属性
• 按顺序链接动画
• 创建可重用的动画函数

来源： docsSource/sections/04-javascript.md docsSource/sections/01-usage.md

基本用法

使用 JavaScript 添加动画非常简单。选择要为其设置动画的元素，然后添加所需的类。

这种方法使您能够根据用户交互或应用程序中的其他事件动态应用动画。

来源： docsSource/sections/04-javascript.md5-8

动画事件

使用 JavaScript 和 Animate.css 的关键优势之一是能够检测动画事件。这使您能够在动画开始、迭代或完成时执行代码。

animationend 事件对于链接动画或在动画完成后执行清理工作特别有用。

来源： docsSource/sections/04-javascript.md10-19

控制动画属性

您可以使用 JavaScript 和 CSS 自定义属性（变量）来动态控制动画属性。

更改持续时间

更改延迟

更改重复次数

您还可以将这些更改全局应用，以影响页面上的所有动画

此技术对于根据用户偏好或设备功能创建慢动作效果或加速动画非常有用。

来源： docsSource/sections/04-javascript.md docsSource/sections/01-usage.md83-91

可重用的动画函数

对于更复杂的应用程序，可重用的实用函数可以简化动画管理并启用基于 Promise 的控制流。

此函数支持使用 Promise 链编写更优雅的动画代码。

来源： docsSource/sections/04-javascript.md28-59

JavaScript 环境中的动画架构

下图说明了 JavaScript 如何与 Animate.css 架构进行交互。

来源： docsSource/sections/02-utilities.md docsSource/sections/04-javascript.md

最佳实践

将 Animate.css 与 JavaScript 集成时，请考虑以下最佳实践：

尊重用户偏好

Animate.css 尊重 prefers-reduced-motion 媒体查询。您的 JavaScript 代码应维护此可访问性功能。

清理动画类

务必在不再需要动画类时将其删除，特别是对于重复动画。这可以防止在重新应用动画时出现意外行为。

有效利用动画事件

添加多个动画事件监听器时，请考虑使用 {once: true} 选项，以便在监听器触发后自动将其删除，防止内存泄漏。

小心链接动画

链接动画时，要注意时机和性能。过多的顺序动画会影响性能和用户体验。

来源： docsSource/sections/03-best-practices.md docsSource/sections/04-javascript.md40-47

与 JavaScript 框架集成

Animate.css 可以与流行的 JavaScript 框架集成。以下是基本方法的比较：

框架	安装	基本用法
React	import 'animate.css'	<div className="animate__animated animate__bounce">React 元素</div>
Vue	import 'animate.css'	<div :class="{'animate__animated': true, 'animate__bounce': isAnimated}">Vue 元素</div>
Angular	在 angular.json 的 styles 数组中导入	<div [ngClass]="{'animate__animated': true, 'animate__bounce': isAnimated}">Angular 元素</div>
Svelte	import 'animate.css'	<div class="animate__animated animate__bounce">Svelte 元素</div>

在框架中进行动态控制时，您通常会使用框架的状态管理来根据组件状态控制应用哪些动画类。

示例用例

1. 表单验证反馈：对有错误输入的表单字段显示抖动动画。
2. 页面过渡：在导航期间为页面元素设置入场和出场动画。
3. 吸引用户注意的元素：突出重要通知或号召性用语。
4. 交互式 UI 元素：增强按钮点击、悬停状态和其他交互。
5. 分步指南：在教程或入职流程中按顺序为元素设置动画。

相关主题

有关可以使用 JavaScript 应用的实用程序的更多信息，请参阅 实用程序类和自定义。

有关常规用法指南和安装，请参阅 使用指南。

有关应用动画时的可访问性注意事项，请参阅 可访问性注意事项。