SuperAPI AI 工具集

xyz-flip-left

前端与建站

查看项目

更新于 10-16 01:36

技能介绍

用途:Flip Left 是 AnimXYZ(MIT)提供的一种可组合入场动画,用于让元素以声明式方式淡入并结合向左翻转。适合希望不写 keyframes 就实现入场效果的前端场景。

主要能力:通过 xyz 属性组合 fade、move、scale、rotate 等效果,例如在元素上设置 xyz="fade flip-left-90",再切换 xyz-in / xyz-out 类名来触发出场或退场。

使用方式:引入 @animxyz/core 的 CSS,然后在目标元素上设置 xyz="fade flip-left-90",最后切换 xyz-in 或 xyz-out 类名。

适用场景:需要快速为元素添加入场动画、且不想手写关键帧的界面。

限制:核心 CSS 体积约 100KB,若仅为单个效果引入可能不划算;不宜在大量元素上过度使用。无障碍方面,prefers-reduced-motion 下不自动播放。许可为 MIT。