贡献指南

相关源文件

• .prettierrc
• CODE_OF_CONDUCT.md
• CONTRIBUTING.md
• README.md

本文档为希望为Animate.css库做出贡献的开发者提供了全面的指南。它涵盖了贡献工作流程、动画设计原则、代码风格要求和提交流程。有关在项目中使用Animate.css的信息，请参阅使用指南。

贡献流程概述

为确保动画高质量并符合库的理念和保持一致性，对Animate.css的贡献遵循结构化的流程。

来源： CONTRIBUTING.md25-31 README.md46-48

设计指南

Animate.css 遵循特定的设计理念，以确保动画的实用性、微妙性和专业性。这些指南有助于在库的所有动画中保持一致的体验。

动画设计原则

原则	描述
微妙性	动画应微妙，避免大幅度位移或持续时间超过1秒
容忍度	动画不应在重复观看时变得烦人或过于突兀
不干扰性	动画不应降低可用性或干扰文档流程或控件可用性
有用性	动画应引导用户、缓和阅读顺序或传达元素关系
熟悉性	新动画应与现有动画集保持一致
自然性	动画应反映自然物理规律，避免极端的时间函数

来源： CONTRIBUTING.md5-17

动画类别

开发新动画时，应将其归入已建立的动画类别之一。

类别	目的	示例
吸引注意力	吸引元素注意力	bounce, flash, pulse, shake
进入动画	将元素引入页面	fadeIn, slideIn, zoomIn
退出动画	将元素从视图中移除	fadeOut, slideOut, zoomOut
特殊动画	不适用于其他类别的独特效果	hinge, jackInTheBox, rollIn

贡献时，请确保您的动画符合这些类别，或根据需要提出新类别。

来源： CONTRIBUTING.md20

代码风格要求

保持一致的代码风格对项目至关重要。贡献者应遵循以下指南：

1. 命名约定：动画名称使用驼峰式命名（camelCase），并确保其正确分类（例如，fadeIn，bounceOut）。
2. 缩进：使用两个空格进行缩进。
3. 文件结尾：每个文件以一个空行结尾。
4. 代码格式化：确保您的编辑器中启用了editorconfig插件/扩展，以便自动格式化代码。

仓库使用Prettier进行代码格式化，配置如下：

{
  "bracketSpacing": false,
  "proseWrap": "never",
  "singleQuote": true,
  "trailingComma": "all"
}

来源： CONTRIBUTING.md18-24 .prettierrc1-6

分步贡献流程

1. Fork与设置

开始贡献Animate.css

1. 在 GitHub 上 Fork 仓库
2. 在本地克隆你的 fork
3. 设置开发环境
4. 确保已安装所需依赖
   • Node.js 和 npm/yarn
   • 支持editorconfig和prettier的编辑器

2. 创建分支

为您的贡献创建一个新的主题分支

为您的分支命名，以准确反映您要进行的更改。

3. 开发您的动画

开发新动画时

1. 遵循命名约定（驼峰式命名）
2. 将您的动画放置在合适的类别中
3. 确保其符合设计指南
4. 在不同浏览器中测试动画
5. 支持可访问性，包括prefers-reduced-motion

来源： CONTRIBUTING.md25-31 README.md46-48

4. 创建演示

创建演示是贡献过程中至关重要的一步。在接受拉取请求之前，Animate.css要求提供一个CodePen演示来展示您的动画。

1. 在CodePen上创建一个新的pen
2. 包含Animate.css（您可以链接到您的fork或直接包含修改后的CSS）
3. 演示您的动画效果
4. 如果适用，提供控件来触发动画

您的CodePen应清楚地展示动画的工作原理以及它支持的任何配置选项。

5. 提交拉取请求

当您的动画准备就绪时

1. 将更改推送到您的Fork
2. 创建一个针对main分支的拉取请求
3. 在您的PR描述中包含：
   • 清晰的标题描述您的更改
   • 您的CodePen演示链接
   • 动画的描述及其目的
   • 任何特殊考虑因素或实现细节

来源： CONTRIBUTING.md25-31 README.md46-48

动画测试

开发动画时，请测试：

1. 跨浏览器兼容性：确保动画在主流浏览器中正常工作。
2. 性能：动画不应导致性能问题，尤其是在移动设备上。
3. 可访问性：遵守prefers-reduced-motion媒体查询。
4. 集成性：确保动画与现有库良好集成。

社区准则

Animate.css的贡献者应遵守《贡献者公约行为准则》。这确保了一个受欢迎且包容的参与环境。

《行为准则》的关键原则包括：

• 使用受欢迎且包容的语言
• 尊重不同的观点和经验
• 优雅地接受建设性批评
• 关注社区的最佳利益
• 对其他社区成员表示同情

有关完整的《行为准则》，请参阅仓库中的CODE_OF_CONDUCT.md 文件。

来源： CODE_OF_CONDUCT.md1-47 README.md42-44

常见的贡献场景

添加新动画

1. 在相应的类别目录中创建动画CSS文件
2. 遵循命名约定和代码风格
3. 创建CodePen演示
4. 提交拉取请求

修改现有动画

1. 确定要修改的动画文件
2. 在修改时保持向后兼容性
3. 创建CodePen演示以展示改进
4. 提交带有详细说明的拉取请求

文档改进

1. 确定需要改进的文档
2. 按照项目风格进行更改
3. 提交解释改进的拉取请求

结论

为Animate.css贡献包括创建符合既定设计原则和代码风格指南的微妙、有用的动画。通过确保您的贡献符合这些标准并提供清晰的演示，您可以帮助维护库的质量和实用性，造福整个社区。

请记住，贡献的两个主要规则是：

1. 匹配命名约定（驼峰式命名，已分类）
2. 提供动画的CodePen演示

遵循这些指南，您的贡献将受到Animate.css社区的欢迎。

来源： README.md46-48 CONTRIBUTING.md1-31