Yellow Fade Technique：让「刚刚变化的地方」自己跳出来

当一条数据被异步加进列表、或某一行被悄悄改动后，用户的眼睛不知道该看哪——尤其在长列表里，新内容可能出现在视野之外，或与旧内容长得一模一样。37signals 在 Basecamp 里提出的 Yellow Fade Technique (YFT) 用一个极轻量的手法解决它：把刚变化的元素瞬间染成黄色，再用一两秒缓缓淡回，用一次短暂的高亮把视线主动牵引过去。下面触发更新，对比开 / 关高亮的差别。

关键在那条不对称的缓动：染色是瞬间的（动画 0% 即满黄），淡出是缓慢的（拉到一两秒）。瞬间出现负责抓住注意力，缓慢退场负责不打扰——既被看见，又不会像闪烁那样烦人。若染色也用渐变淡入，效果会大打折扣。时长也有讲究：太短 (<200ms) 眼睛跟不上，太长 (>3s) 显得迟滞。

用一段 keyframes 实现——瞬间满黄 → 缓慢淡回：

@keyframes yft {
  0%   { background: #ffe08a; }   /* 瞬间满黄 */
  100% { background: transparent; } /* 缓慢淡回 */
}
.flash { animation: yft 1.2s ease-out; }

重复触发同一行时有一个易错点:CSS 动画不会因再次添加同名 class 而重播。修法是先移除 class、强制一次 reflow（读取 offsetWidth）、再加回去，让浏览器把它当作一次全新的动画：

function flash(el) {
  el.classList.remove('flash');
  void el.offsetWidth;        // 强制 reflow,重置动画
  el.classList.add('flash');  // 现在能再次播放
}