你了解 Transition 嗎？你可能并不了解 Transition？下面本篇文章就來通過圖文結(jié)合的方式帶大家深入了解一下Transition，希望對大家有所幫助！

這篇文章我們深入學(xué)習(xí) Transition 動畫。沒錯，CSS3 Transition 動畫。你可能會問，不是很簡單嗎，這什么好講的？

確實，Transition 動畫使用起來非常容易。只需要給元素加上 transition-delay, transition-duration, transition-property, transition-timing-function 屬性就可以有過濾效果。更簡單的用法是直接使用簡寫的 transition 屬性：

transition: <property> <duration> <timing-function> <delay>;  // transition-delay 默認(rèn)為 0 // transition-property 默認(rèn)為 all // transition-timing-function 默認(rèn)為 ease transition: 0.3s;

由于 transition 動畫用起來幾乎沒有成本，一直以來也沒有太深入學(xué)習(xí)，最近翻看源代碼和 MDN 文檔之后發(fā)現(xiàn)有些知識沒有理解到位，于是乎有了這篇文章，希望對讀者更深入了解 Transition 動畫有所幫助。（學(xué)習(xí)視頻分享：css視頻教程）

為了盡量降低閱讀理解成本，這篇文章會寫得稍微啰嗦一點點，大部分示例都會配圖 ——【多圖預(yù)警開始！】

什么是 Transition?

簡單的說就是過渡動畫，通常修改 DOM 節(jié)點的樣式都是立即更新在頁面上的，例如修改寬高，修改透明度，修改背景色等等。

例如當(dāng)鼠標(biāo)移動至按鈕上時，為了突出按鈕的可交互，會在 hover 時修改它的樣式，讓用戶注意到它。沒有加 transition 過渡動畫，給用戶的感覺會很僵很生硬。

.button {   // ...   background-color: #00a8ff; }  .button:hover {   background-color: #fbc531;   transform: scale(1.2); }

加上 transition 一行代碼之后，變化就會比較順滑。

.button {   // ...   transition: 1s; } // ...

這個例子中我們修改了 background-color 和 transform，結(jié)合 transition 屬性，瀏覽器就會自動讓屬性值隨著時間變化，從舊值逐步過渡到過渡新值，視覺上就是動畫效果。

區(qū)分于 Animation，Transition 動畫側(cè)重于表現(xiàn)一次過渡效果，從開始到結(jié)束的變化。而 Animation 不需要變化，可以循環(huán)播放 ▶️。

需要注意，并不是所有的屬性變化都會有過渡效果

1. 有些 CSS 屬性只支持枚舉值，非黑即白，不存在中間狀態(tài)，例如 visibility: visible; 被修改成 visibility: hidden; 不會有動畫效果，因為不存在可見又不可見的中間狀態(tài)。在瀏覽器上的表現(xiàn)是 duration 到了之后元素立即突變?yōu)?hidden。

   .button:hover {   //...   visibility: hidden; }

   

2. 有些屬性雖然是可計算數(shù)值，但天生注定不能有過渡效果，例如 transition-delay，transition-duration 都是立即生效，這里值得補(bǔ)一句由于 transition-* 屬性是即時生效，這行代碼如果是 hover 時才加上，那么效果會是 hover 時有動畫，移出時沒有動畫。

3. 即使是可過渡的屬性變化，也可能因為無法計算中間狀態(tài)而失去過渡效果。例如 box-shadow 屬性雖然支持 transition 的動畫的，但如果從 "outset" 切換到 inset，也是突變的。

   .button {   // ...   box-shadow: 0 0 0 1px rgb(0 0 0 / 15%);   transition: 1s; }  .button:hover {   // ...   box-shadow: inset 0 0 0 10px rgb(0 0 0 / 15%); }

   
   從表現(xiàn)上看，box-shadow 的變化是 hover 上去立馬就生效了。

4. 如果某個屬性值是連續(xù)可計算的數(shù)值，但是變化前后變成散列的枚舉值，那么過渡也不會生效。例如從 height: 100px => height: auto 是不會有動畫的。

以上的內(nèi)容回顧了 Transition 的基本用法，下面我們來看一個在實際開發(fā)場景中會遇到的問題。

為什么 Transition 動畫沒有生效？

場景題：假設(shè)我們現(xiàn)在接到一個自定義下拉選擇器的動畫需求，設(shè)計師給到的效果圖如下：

這是很常見的出現(xiàn)-消失動畫，在很多組件庫里面都會出現(xiàn)，點擊觸發(fā)器（按鈕）時才在頁面上渲染 Popup (下拉內(nèi)容)，并且 Popup 出現(xiàn)的同時需要有漸現(xiàn)和下滑的動畫；展開之后再次點擊按鈕，Popup 需要漸隱和上滑。

平時使用的時候并沒有過多注意它的實現(xiàn)，不妨現(xiàn)在讓我們動手試驗一下。

暫時忽略 popup 的內(nèi)容，用了個 div 來占位模擬，HTML 結(jié)構(gòu)很簡單。

<div class="wrapper">     <div id="button"></div>     <div id="popup"></div> </div>

在點擊按鈕的時候，讓 popup 顯示/隱藏，然后切換 popup 的 .active 類名。

const btn = document.querySelector("#button"); const popup = document.querySelector("#popup");  if (!popup.classList.contains("active")) {     popup.style.display = "block";     popup.classList.add("active"); } else {     popup.style.display = "none";     popup.classList.remove("active"); }

編寫 CSS 樣式，在不 active 時透明度設(shè)置為 0，向上偏移，active 時則不偏移且透明度設(shè)置為 1。

#popup {   display: none;   opacity: 0;   transform: translateY(-8px);   transition: 1s;    &.active {     opacity: 1;     transform: translateY(0%);   } }

完整代碼 在這里，看起來代碼沒什么問題，點擊按鈕切換的時候，popup 應(yīng)該會有動畫過渡效果。然而實際運行效果：

硬邦邦地完全沒有過渡效果，這是為啥？明明已經(jīng)設(shè)置了 transition，且 opacity 和 translateY 都是可計算可過渡的數(shù)值，也產(chǎn)生了變化，瀏覽器為什么不認(rèn)呢？

在查文檔之前，我們先嘗試使用萬精油 setTimeout。

方案一：setTimeout 萬精油

修改 JS 代碼:

btn.addEventListener("click", () => {   if (!popup.classList.contains("active")) {     popup.style.display = "block";     setTimeout(() => {       popup.classList.add("active");     }, 0);   } else {     popup.classList.remove("active");     setTimeout(() => {       popup.style.display = "none";     }, 600);   } });

可以看到添加了 setTimeout 之后，transition 動畫就生效了。

隱藏時的 setTimeout 600ms 對應(yīng) CSS 中設(shè)置的 transition: 0.6s，就是動畫完成之后才將 display 設(shè)置為 none。

主要困惑的點在于為什么顯示的時候也需要加 setTimeout 呢？setTimeout 0 在這里起到的作用是什么？帶著問題去翻看規(guī)范文檔。

在規(guī)范文檔的 Starting of transitions 章節(jié)找到下面這段話：

When a style change event occurs, implementations must start transitions based on the computed values that changed in that event. If an element is not in the document during that style change event or was not in the document during the previous style change event, then transitions are not started for that element in that style change event.

翻譯一下，當(dāng)樣式變更事件發(fā)生時，實現(xiàn)（瀏覽器）必須根據(jù)變更的屬性執(zhí)行過渡動畫。但如果樣式變更事件發(fā)生時或上一次樣式變更事件期間，元素不在文檔中，則不會為該元素啟動過渡動畫。

結(jié)合瀏覽器構(gòu)建 RenderTree 的過程，我們可以很清晰地定位到問題：當(dāng)樣式變更時間發(fā)生時，display: none 的 DOM 元素并不會出現(xiàn)在 RenderTree 中（style.display='block' 不是同步生效的，要在下一次渲染的時候才會更新到 Render Tree），不滿足 Starting of transitions 的條件。

所以 setTimeout 0 的作用是喚起一次 MacroTask，等到 EventLoop 執(zhí)行回調(diào)函數(shù)時，瀏覽器已經(jīng)完成了一次渲染，再加上 .active 類名，就有了執(zhí)行過渡動畫的充分條件。

優(yōu)化方案二：精準(zhǔn)卡位 requestAnimationFrame

既然目的為了讓元素先出現(xiàn)到 RenderTree 中，和渲染相關(guān)，很容易想到可以將 setTimeout 替換成 requestAnimationFrame，這樣會更精準(zhǔn)，因為 requestAnimation 執(zhí)行時機(jī)和渲染有關(guān)。

if (!popup.classList.contains("active")) {     popup.style.display = "block";      requestAnimationFrame(() => {         popup.classList.add("active");     }); }

補(bǔ)充一個小插曲：在查找資料的過程中了解到 requestAnimationFrame 的規(guī)范是要求其回調(diào)函數(shù)在 Style/Layout 等階段之前執(zhí)行，起初 Chrome 和 Firefox 是遵循規(guī)范來實現(xiàn)的。而 Safari 和 Edge 是在執(zhí)行的時機(jī)是在之后。 從現(xiàn)在的表現(xiàn)上來看，Chrome 和 Firefox 也改成了在之后執(zhí)行，翻看以前的文檔會說需要嵌套兩層 requestAnimationFrame，現(xiàn)在已經(jīng)不需要了。Is requestAnimationFrame called at the right point?

優(yōu)化方案三：Force Reflow

在規(guī)范文檔中，還留意到以下這句話：

Implementations typically have a style change event to correspond with their desired screen refresh rate, and when up-to-date computed style or layout information is needed for a script API that depends on it.

意思是說，瀏覽器通常還會在兩種情況下會產(chǎn)生樣式變更事件，一是滿足屏幕刷新頻率（不就是 requestAnimationFrame？），二是當(dāng) JS 腳本需要獲取最新的樣式布局信息時。

在 JS 代碼中，有些 API 被調(diào)用時，瀏覽器會同步地計算樣式和布局，頻繁調(diào)用這些 API（offset*/client*/getBoundingClientRect/scroll*/…等等）通常會成為性能瓶頸。

然而在這個場景卻可以產(chǎn)生奇妙的化學(xué)反應(yīng)：

if (!popup.classList.contains("active")) {   popup.style.display = "block";   popup.scrollWidth;   popup.classList.add("active"); }

注意看，我們只是 display 和 add class 之間讀取了一下 scrollWidth，甚至沒有賦值，過渡動畫就活過來了。

原因是 scrollWidth 強(qiáng)制同步觸發(fā)了重排重繪，再下一行代碼時，popup 的 display 屬性已經(jīng)更新到 Render Tree 上了。

優(yōu)化方案四：過渡完了告訴我 onTransitionEnd

現(xiàn)在【出現(xiàn)】動畫已經(jīng)搞明白了，在看開源庫的源碼中發(fā)現(xiàn)像 vue, bootstrap, react-transition-group 等庫都是使用了 force reflow 的方法，而 antd 所使用的 css-animte 庫則是通過設(shè)置 setTimeout。

【消失】動畫還不夠優(yōu)雅，前面我們是直接寫死 setTimeout 600，讓元素在動畫結(jié)束時消失的。這樣編碼可復(fù)用性差，修改動畫時間還得改兩處地方（JS + CSS），有沒有更優(yōu)雅的實現(xiàn)？

popup.classList.remove("active");setTimeout(() => {     popup.style.display = "none"; }, 600);

文檔中也提到了 Transition Events，包括 transitionrun，transitionstart，transitionend，transitioncancel，看名字就知道事件代表什么意思，這里可以用 transitionend 進(jìn)行代碼優(yōu)化。

if (!popup.classList.contains("active")) {     popup.style.display = "block";     popup.scrollWidth;     popup.classList.add("active"); } else {     popup.classList.remove("active");     popup.addEventListener('transitionend', () => {         popup.style.display = "none";     }, { once: true }) }

需要注意 transition events 同樣也有冒泡、捕獲的特性，如果有嵌套 transition 時需要留意 event.target。

到這里我們已經(jīng)用原生 JS 完成了一個出現(xiàn)、消失的動畫實現(xiàn)，完整的代碼在這里。文章的最后，我們參照 vue-transition 來開發(fā)一個 React Transition 的單個元素動畫過渡的最小實現(xiàn)。

仿 v-transition 實現(xiàn)一個 React Transition 組件

根據(jù)動畫過程拆分成幾個過程：

• enter 階段渲染 DOM 節(jié)點，初始化動畫初始狀態(tài)（添加 *-enter 類名）
• enter-active 階段執(zhí)行 transition 過渡動畫（添加 *-enter-active 類名）
• enter-active 過渡完成之后進(jìn)入正常展示階段（移除 *-enter-active 類名）

enter-to 和 leave-to 暫時用不上，leave 階段和 enter 基本一致也不再贅述。

直接看代碼：

export const CSSTransition = (props: Props) => {   const { children, name, active } = props;   const nodeRef = useRef<HTMLElement | null>(null);   const [renderDOM, setRenderDOM] = useState(active);    useEffect(() => {     requestAnimationFrame(() => {       if (active) {         setRenderDOM(true);         nodeRef.current?.classList.add(`${name}-enter`);         // eslint-disable-next-line @typescript-eslint/no-unused-expressions         nodeRef.current?.scrollWidth;         nodeRef.current?.classList.remove(`${name}-enter`);         nodeRef.current?.classList.add(`${name}-enter-active`);          nodeRef.current?.addEventListener("transitionend", (event) => {           if (event.target === nodeRef.current) {             nodeRef.current?.classList.remove(`${name}-enter-active`);           }         });       } else {         nodeRef.current?.classList.add(`${name}-leave`);         // eslint-disable-next-line @typescript-eslint/no-unused-expressions         nodeRef.current?.scrollWidth;         nodeRef.current?.classList.remove(`${name}-leave`);         nodeRef.current?.classList.add(`${name}-leave-active`);          nodeRef.current?.addEventListener("transitionend", (event) => {           if (event.target === nodeRef.current) {             nodeRef.current?.classList.remove(`${name}-leave-active`);             setRenderDOM(false);           }         });       }     });   }, [active, name]);    if (!renderDOM) {     return null;   }    return cloneElement(Children.only(children), {     ref: nodeRef   }); };

這個組件接收三個 props，分別是

• children 需要做過渡動畫的 ReactElement，只允許傳一個 Element
• name 過渡動畫的 css 類名前綴
• active 布爾值，用于區(qū)分是進(jìn)場還是消失

使用方式：

<CSSTransition name="fade" active={active}>     // 一個需要做過渡動畫的 ReactElement </CssTransition>

借助 transition-delay，加一點技巧實現(xiàn) stagger 效果：

完整的示例代碼在這里，注意：這只是個快速實現(xiàn)用于演示的示例，有非常多的問題沒有考慮在內(nèi)，僅可用于學(xué)習(xí)參考。

結(jié)語

原本以為非常基礎(chǔ)簡單的知識點，分分鐘可以寫完這篇文章。沒想到中途查文檔，看資料，制作演示 DEMO 還是花了不少時間。好在整理資料的過程中也理清了很多知識點。希望這篇文章對你熟悉 Transition 動畫有所幫助 。