SuperAPI AI 工具集

xyz-flip-up

设计与创作

查看项目

更新于 10-16 01:36

技能介绍

用途:Flip Up 是 AnimXYZ(MIT)中一种可组合的入场动效,用于让元素以声明方式进入或退出视野,适合不想手写 CSS 关键帧的场景。

主要能力:通过 xyz="..." 属性组合 fade、move、scale、rotate 等效果,例如 xyz="fade flip-up-90",即可同时实现淡入与翻转上移的入场,无需编写 keyframes。

使用方式:先引入 @animxyz/core 的 CSS,再在目标元素上设置 xyz="fade flip-up-90",最后通过切换 xyz-in / xyz-out 类来控制进入与退出状态。

适用场景:需要为元素添加轻量、可复用的入场动画时使用。

限制与注意:它依赖约 100KB 的核心 CSS,仅为单个效果引入整个核心并不划算;也不宜在大量元素上过度使用。无障碍方面,在 prefers-reduced-motion 下不自动播放。许可为 MIT。

其余信息暂未提供。