automic-style-engine
一个可配置的Animate.css集成为顺风CSS 3。它在构建时读取已安装的Animate.css目录，只发出您选择的动画，并生成关键帧的命名空间以防止冲突。
全球 duration， delay, iterationCount 值被传递给 @utilityforge/dynamic-interface-kit，它生成相应的Tailwind基础自定义属性。
安装
npm install automic-style-engine animate.css
基本用法
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}'],
plugins: [
require('automic-style-engine')({
animations: ['bounce', 'fadeIn', 'fadeOut', 'slideInUp']
})
]
};
将基类与动画类一起应用：
<div class="keyframe keyframe-fade-in">Content</div>
在生成的类名中，动画名称被转换为kebab case。例如, fadeInDownBig 变成了 keyframe-fade-in-down-big.
配置
require('automic-style-engine')({
prefix: 'motion',
animations: ['bounce', 'fadeIn'],
exclude: ['bounce'],
aliases: {
enter: 'fadeIn'
},
duration: '900ms',
delay: '0s',
iterationCount: '1',
namespaceKeyframes: true,
respectReducedMotion: true,
modifiers: true,
durations: {
quick: '300ms',
deliberate: '1400ms'
},
delays: {
short: '150ms',
long: '800ms'
},
repeats: {
twice: '2',
forever: 'infinite'
}
})
| 选项 | 默认的 | 目的 |
|---|---|---|
prefix | keyframe | 类和生成的关键帧的前缀 |
animations | '*' | animation .css要包含的名称； '*' 包括完整的目录 |
exclude | [] | 要省略的动画名称 |
aliases | {} | 公共类名映射到Animate.css动画名 |
duration | 1s | 默认动画时长 |
delay | 0s | 默认动画延迟 |
iterationCount | 1 | 默认迭代计数 |
namespaceKeyframes | true | 前缀关键帧标识符以防止冲突 |
respectReducedMotion | true | 当用户请求减少运动时，最小化动画 |
modifiers | true | 生成计时、重复、暂停和运行实用程序 |
durations | 内置的地图 | 持续时间修饰令牌 |
delays | 内置的地图 | 延迟修饰令牌 |
repeats | 内置的地图 | 迭代修饰符标记 |
弃用的 classes 选项仍然是的别名 animations 在迁移。
生成工具
使用默认前缀，插件生成：
<div class="keyframe keyframe-bounce keyframe-duration-fast keyframe-delay-1s keyframe-repeat-2"></div>
keyframe-duration-{token}设置持续时间变量。keyframe-delay-{token}设置延迟变量。keyframe-repeat-{token}设置迭代计数变量。keyframe-paused和keyframe-running控制回放。
顺风变型正常工作：
<div class="keyframe keyframe-fade-in hover:keyframe-paused md:keyframe-duration-slow"></div>
别名
别名提供稳定的语义名称而不复制关键帧：
require('automic-style-engine')({
animations: [],
aliases: {
notificationEnter: 'fadeInDown',
notificationExit: 'fadeOutUp'
}
})
<aside class="keyframe keyframe-notification-enter"></aside>
目录
该包暴露了在已安装的animation .css版本中找到的动画名称：
const animateCatalog = require('automic-style-engine');
console.log(animateCatalog.catalog());
项目结构
index.js Tailwind plugin entry point
lib/
shared/ Package constants, error helper, case conversion
options/ Defaults, validation, and option normalization
catalog/ Animate.css loading, parsing, and selection
styles/ Base variables, utilities, keyframes, reduced motion
test/ node:test suites
从1.x迁移
- 默认的类前缀从
animatecss来keyframe. - 生成的动画类名使用kebab case。
- 关键帧名称默认是命名空间。
animations替换classes；classes保持一个兼容性别名。@utilityforge/dynamic-interface-kit现在处理全局定时选项并自动安装。- 默认情况下，减少运动处理是启用的。
许可证
麻省理工学院