用 requestAnimationFrame 给单文件 2048 做移动动画：连按不乱的最小做法

直接改 DOM 再加 CSS transition 做 2048 的移动动画，慢速操作没问题，快速连按就容易出问题：上一帧动画还没跑完，下一帧又改了格子的位置，动画队列叠加后格子会停在错误的位置，看起来像丢了一步。
单文件场景下一个够用的做法是把逻辑和渲染分开。第一，键盘或滑动输入进来时，先在数组里算出合并后的终态，不要立刻动 DOM。第二，把渲染统一放到 requestAnimationFrame 的回调里，一次性把所有格子的 transform 写到位，浏览器在同一帧里完成布局，中间态不会被用户看到。第三，动画进行中收到的新输入不要立刻执行，先记下来，等当前帧动画结束后再处理下一条；这样输入不会丢，也不会打断正在跑的动画。
两个小坑值得注意。一是不要用 setTimeout 按动画时长估算结束时间，时长一改就对不上；能用 transitionend 就用它，动画真正结束才放行下一条输入。二是页面切到后台时 transitionend 可能被延迟，这时要给动画加兜底：比如在下一帧检查时若格子已在终态就直接放行，避免输入被卡住。
这个做法不需要引入动画库，几十行代码就能让连按、快速滑动下的棋盘保持稳定，适合单文件小游戏先跑起来再慢慢打磨手感。