一次切换，需要一个可以落脚的地方

界面切换常被理解成“加一段动画”。但动画的时间和方向如果与内容无关，访客只会看到一层好看的遮盖，结束以后还得重新寻找自己在哪里。一次有意义的转场，首先要回答两个问题：离开的是什么，抵达的又是什么。

尺寸必须有连续性

封面被点击后，阅读界面若突然比原来的书宽出一截，即使中间有翻页效果，也会出现不自然的跳动。人眼追踪的是物体的边缘和重心；边缘对不上，动效就无法解释变化。书从封面进入目录，可以改变厚度、展开方向和光影，但应该让展开后的尺寸与最终阅读区接得上。

相同的问题会出现在音乐里。切换到纯净模式时，播放器、封面和歌词可以改变位置，却不应让整个背景先消失，再从黑色里重新出现。保持一个共享的颜色或形状，比多加一层转场遮罩更能让人感到连续。

新内容要在旧内容退场时准备好

闪一下通常不是动画太短，而是两种状态之间存在一帧空白。旧界面先卸载，新界面尚未完成布局、图片还没加载、颜色还未计算，浏览器就暴露了底色。用户感受到的“黑屏”，往往来自这个没有被设计的中间状态。

可以让场景底色始终存在，让旧内容淡出时新内容已经占据正确位置；封面暂未加载时保留同尺寸的占位，音频暂停时让可视化回到静止画面。这些处理不追求炫技，而是在交接的瞬间维持页面可信。

结束要比开始更清楚

很多转场把力气花在开场，忘了告诉用户何时可以继续操作。按钮在视觉上已经出现，却仍不可点击；目录已经关闭，背景滚动还被锁住；歌词模式已经进入，退出入口却要再找一次。动画结束和交互状态完成，应该落在同一个时刻。

关闭时也需要照顾方向。打开是从一个入口进入内容，关闭则应该让视线回到那个入口附近，而不是把人抛回页面顶端。对减少动态效果的访客，直接完成状态切换即可，但焦点和阅读位置同样要保持合理。

转场的价值不在于证明页面会动，而在于让人无需停下来确认：刚才的东西去了哪里，现在又能做什么。