UD5工具箱
SPA（Single Page Application）
单页应用是一种Web应用程序架构模式，整个应用在加载时只请求一个HTML页面，后续的所有交互和视图切换都通过JavaScript动态更新DOM来实现，而不会触发浏览器的整页刷新。React、Vue、Angular等主流前端框架都采用SPA架构。由于页面不会重新加载，不同视图之间的过渡效果就变得尤为重要，这也是本工具存在的核心原因。
CSS Transition
CSS过渡是一种简单的动画机制，它允许属性值在一定时间内平滑地从一个状态变化到另一个状态。transition属性可以指定过渡的属性名称、持续时间、延迟时间和缓动函数。在SPA页面过渡中，transition通常用于元素进入和离开时的动画效果。触发条件包括hover、class变更、JavaScript样式修改等。与animation相比，transition更适合简单的双向过渡场景。
CSS Animation
CSS动画通过@keyframes规则定义一个完整的动画序列，可以指定多个关键帧的样式状态，浏览器会自动在关键帧之间进行插值计算。animation属性支持自动播放、循环、暂停等高级特性。在复杂的页面过渡场景中，当简单的transition无法满足多阶段动画需求时，animation就派上用场了。例如一个包含缩放加旋转的复合过渡效果，通常需要用animation来实现。
缓动函数（Easing Function）
缓动函数定义了动画速度随时间变化的数学曲线。在CSS中，常见的缓动函数包括ease、ease-in、ease-out、ease-in-out和linear。其中ease是默认值，采用三次贝塞尔曲线，特点是先快后慢再加速然后减速停止。不同的缓动函数会给人完全不同的视觉感受：ease-out适合退出动画（元素消失时），ease-in适合进入动画（元素出现时），而ease-in-out则适合两者兼有的场景。Material Design还推荐了自定义贝塞尔曲线值来获得更自然的动画效果。
淡入淡出（Fade In/Out）
淡入淡出是通过改变元素的opacity（透明度）属性来实现的过渡效果。淡入（Fade In）将透明度从0逐渐增加到1，使元素从完全透明变为完全可见；淡出（Fade Out）则相反。这种效果视觉冲击较小，适合内容切换或标签切换等场景。在实际实现中，通常需要配合position:absolute定位，让进入和离开的元素重叠在同一位置，避免布局跳动。
缩放（Scale）
缩放过渡通过CSS的transform: scale()函数改变元素的尺寸比例。放大效果将元素从较小的尺寸逐渐扩展到原始大小，缩小效果则相反。缩放动画常用于模态弹窗的出现和消失、图片预览的打开和关闭等场景。在实现时需要注意，缩放是以元素的transform-origin（变换原点）为基准进行的，默认是元素中心。为了避免缩放过程中与其他元素产生重叠问题，通常需要结合z-index进行层叠控制。
翻转（Flip）
翻转效果模拟了卡片绕某条轴线旋转180度的视觉效果。X轴翻转模拟的是沿水平轴翻转（上翻下），Y轴翻转模拟的是沿垂直轴翻转（左翻右）。实现翻转效果需要使用3D变换（transform: rotateX()或rotateY()）和perspective（透视）属性。翻转动画适合展示卡片正反面信息的场景，例如商品详情卡、名片等。在实际应用中，翻转过程中通常会配合opacity变化来隐藏背面内容，避免出现镜像文字。
GPU加速
GPU加速是指利用图形处理器（而非中央处理器CPU）来执行某些类型的动画计算。在Web动画中，使用transform和opacity属性进行的动画会被浏览器自动分配给GPU处理，因为这些属性的变化只需要重新合成图层（compositing），不需要触发重排（reflow）或重绘（repaint）。这就是为什么在优化动画性能时，我们总是建议只使用transform和opacity来做动画，而避免使用width、height、margin、padding等会触发重排的属性。在页面过渡效果沙盒中，大部分预设效果都是基于GPU加速属性实现的。