提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“翻滚退出”(Roll Out)退场动画。
元素像轮子一样边转动边向右滚出,同时淡出:平滑,离开时加速。
等它完全滚走后再从布局中移除;如果用户开启了“减少动态效果”(prefers-reduced-motion),则立即隐藏。相似的动效
A
元素绕一个支点旋转,同时淡出消失。
适用场景
条目的活泼移除
在[应用位置]添加“旋转退出”(Rotate Out)退场动画。
元素绕自身中心旋转略多于半圈,同时淡出:平滑,逐渐加速。
旋转结束后再移除;如果用户开启了“减少动态效果”(prefers-reduced-motion),则立即隐藏。A
Slide Out (滑出)
别称 Slide Out Up, Slide Out Down
元素滑出容器边缘后消失。
适用场景
关闭抽屉和面板
在[应用位置]添加“滑出”(Slide Out)退场动画,也叫 slide out up 或 slide out down。
元素保持完全不透明,滑出容器边缘后消失:快速,离开时加速。
在容器边缘处裁切,移出视野后对键盘和屏幕阅读器也隐藏;如果用户开启了“减少动态效果”(prefers-reduced-motion),则立即隐藏。A
元素像轮子一样从左侧滚入,同时淡入。
适用场景
列表项的活泼入场
在[应用位置]添加“翻滚进入”(Roll In)入场动画。
元素像轮子一样边转动边从左侧滚入,同时淡入:平滑,落定时减速。
只播放一次;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接在原位显示,不做动画。A
元素以左上角为铰链摆动、晃荡几下,然后掉出屏幕。
适用场景
以滑稽的方式移除元素
在[应用位置]添加“铰链掉落”(Hinge)退场动画。
元素像螺丝松脱一样以左上角为轴向下摆,来回晃荡,然后一边淡出一边掉出屏幕:缓慢、滑稽、刻意。
让它从其他内容上方掉落,不要挤动布局或产生滚动条,掉落后移除元素;如果用户开启了“减少动态效果”(prefers-reduced-motion),则立即隐藏。Entrance & Exit 中的其他动效
A
Rotate In (旋转进入)
别称 Rotate In Down Left
元素绕某个角或自身中心旋转进入,同时淡入。
适用场景
图标或卡片的活泼入场
在[应用位置]添加“旋转进入”(Rotate In)入场动画,也叫 rotate in down left。
元素从倾斜的角度出发,绕左下角旋转到位,同时淡入:平滑、从容,落定时逐渐减速。
只播放一次;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接在原位显示,不做动画。A
Slide In (滑入)
别称 Slide In Up, Slide In Down, Slide In Left, Slide In Right
元素从容器边缘之外滑入到停靠位置,不带淡入效果。
适用场景
抽屉、侧边栏、横幅
在[应用位置]添加“滑入”(Slide In)入场动画,也叫 slide in left、slide in right、slide in up 或 slide in down。
元素从容器边缘之外滑到停靠位置,全程保持完全不透明:快速,平滑减速,不要回弹。
在容器边缘处裁切,避免它在外面时遮住相邻元素或产生滚动条;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接在原位显示。