SuperAPI AI 工具集

xyz-rotate

设计与创作

查看项目

更新于 10-16 01:36

技能介绍

用途:为元素提供可组合的声明式入场动画,用属性而非手写关键帧来控制淡入、位移、缩放、旋转等效果。

主要能力:在元素的 xyz 属性中混合多种效果,例如 xyz="fade rotate-right-45",并通过切换 xyz-in / xyz-out 类来触发入场与出场。

使用方式:1) 引入 @animxyz/core 的 CSS;2) 在目标元素上设置 xyz="fade rotate-right-45";3) 切换 xyz-in / xyz-out 类。

适用场景:需要快速实现无需手写关键帧的入场动效。

限制与注意:应避免为单个效果引入约 100KB 的核心 CSS,也不宜在大量元素上过度使用;在 prefers-reduced-motion 下不自动播放。许可为 MIT。