BetaThis is a live doc! Anyone with edit access can make updates in real time without having to publish.
Edited Apr 11
By Bryan

https://singee.atlassian.net/wiki/spaces/MAIN/pages/118358222/CSS+Transform?atlOrigin=eyJpIjoiM2M4N2EyYjM4ZmM0NDNhYWFiOWQxNmQ0NmExYWM4ODUiLCJwIjoiYyJ9

translate

translate 的百分比是相对于元素本身的

translate 动画常用于「元素自屏幕外出现/消失」或「元素移动」的效果；在动画中，建议始终使用百分比而非绝对数值

scale

scale 会将元素内的内容一同放大/缩小

scale 动画常用于「点击/hover元素出现弹跳状态」、「元素 zoom in/out」

通常情况下，scale 元素不会从 scale(0) 开始，可以尝试 scale(0.5) + opacity 替换

transform-origin

规定动画「原点」/「中心点」，默认是元素 center

popover 动画应当从 trigger 触发点开始动画、而不是元素本身的 center

  • 例如，对于向下展示的菜单中心应该是 top center