fix: 解决结束动效卡顿问题

ai-coding

2026-08-14 4ecab7a8d57781e72d4a584bf01403092781ff58

fix: 解决结束动效卡顿问题

Co-Authored-By: 卢春龙 <lucl@xiaopeng.com>

 src/robotaxi/pages/begin-route/components/calling-car.tsx

@@ -230,7 +230,8 @@
     * 「行程结束」入场：与上面的 shouldPlayEvaluateEnter 完全同理（渲染期捕捉上升沿 → 置类 → 按动画时长清类）。
     * 父层 playFinishedEnter 仅在真实 live 跃迁进入行程结束(8)时为真；恢复态（从首页进入即已是结束态）恒为 false，
     * 此时不加 calling-car--finished-enter 类，结束态背景卡与里程直接显示最终态、不再弹起。
     * 背景卡升起 finished-bg-rise 时长 1s、里程渐显 delay 450ms + 700ms，取最长 ≈1.15s 后清类。
     * 背景卡与里程升起：延迟 700ms + 时长 1s = 1700ms 才结束，故清类须 ≥1700ms，否则会中途移除类
     * 导致动画被截断、瞬间 snap 到最终态（观感为「快结束时卡顿」）。取 1850ms 留缓冲。
     */
    const [shouldPlayFinishedEnter, setShouldPlayFinishedEnter] = useState(false);
    const prevPlayFinishedRef = useRef(false);
@@ -244,7 +245,7 @@
    useEffect(() => {
        if (!shouldPlayFinishedEnter) return;
        if (finishedEnterTimerRef.current) clearTimeout(finishedEnterTimerRef.current);
        finishedEnterTimerRef.current = setTimeout(() => setShouldPlayFinishedEnter(false), 1200);
        finishedEnterTimerRef.current = setTimeout(() => setShouldPlayFinishedEnter(false), 1850);
        return () => {
            if (finishedEnterTimerRef.current) clearTimeout(finishedEnterTimerRef.current);
        };

 src/robotaxi/pages/begin-route/components/css-folder/calling-car.less

@@ -185,12 +185,14 @@
  .calling-car-bg.finished-bg {
    // 背景卡（背景图）缓缓升起：延迟至礼花中段后触发，时长 1s
    animation: finished-bg-rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) @finished-enter-delay both;
    will-change: transform;
  }
  // 里程简化：与背景卡「同延迟、同时长、同曲线」纯位移升起（复用 finished-bg-rise），
  // 与背景卡锁步移动，视觉上如同印在卡面上一起升起；不再做淡入淡出。
  // 整块头部（到达目的地 + 里程）一起动，避免只动里程导致标题脱节。
  .trip-finished-header {
    animation: finished-bg-rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) @finished-enter-delay both;
    will-change: transform;
  }
}
// 派单成功转场期间：蓝牙卡 / 车控卡 / 底部操作栏隐藏但保留占位（opacity），逻辑另在各组件延迟执行；