網誌

JavaScript 視差效果總是看起來有點不對——有點脫節，好像圖層在頁面後面半幀漂浮。這不是草率的程式碼。這是因為捲動事件在瀏覽器已經繪製捲動之後才到達 JavaScript。瀏覽器曾經解決了這個問題——當它將粘性標頭變成 position: sticky 時。Scroll-driven animations 是同樣的手法，一次應用於所有捲動綁定的效果。

十年來，將縮圖動畫成英雄圖片只有一種技術：在前後測量元素，用 transform 偽造差異，然後播放。FLIP。每個動畫函式庫都這樣做，每個都在最糟糕的時候以主執行緒的 JavaScript 為代價。View Transitions API 將整個技巧轉移到瀏覽器——自 React 19.2 和 Next.js 16 起，整個合約只需要一個名為 name 的 prop。

在關於微互動的文章中，我提過 transform 和 opacity 是在合成器執行緒上做動畫，所以即使頁面很重，按鈕動畫理論上也不應該卡頓。這句話依然成立——但有一個那篇文章沒有提到的但書：如果主執行緒被一個長時間的 JS 工作阻塞，動畫可能根本沒有機會開始執行，因為連點擊事件的處理函式本身都還在排隊等候。INP 正是量度這個落差的指標——而 scheduler.yield() 是少數能真正把這個落差補上的方法之一。

「讚好」按鈕立即作出反應，心心圖示填滿，數字隨即增加——而伺服器根本還沒有回應。這不只是微互動那篇文章講過的速度錯覺，而是更進一步的事情：介面展示了一個尚未存在的狀態，並且假定它馬上就會成真。本文探討如何安全地實作這種模式——包括假設落空時要如何老實地收回這個謊言，以及為甚麼手寫 setState 加 catch，是 useOptimistic 提供的方案的劣質版本。

你有沒有想過，為什麼在某些網店將商品加入購物車會感到興奮，而在其他網店卻顯得平淡？關鍵可能在於微互動。這些細微的動畫看似微不足道，但實際上對用戶體驗的影響比你想像的更大。

CSS Houdini 唔係單一技術，而係一堆成熟程度參差不齊嘅規範集合。睇吓邊部分今日真係可以用喺production、@property 同 paint worklet 究竟點運作，以及點解其餘部分至今仍然只係實驗性質。