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

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

確實(shí)，Transition 動(dòng)畫使用起來非常容易。只需要給元素加上 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 動(dòng)畫用起來幾乎沒有成本，一直以來也沒有太深入學(xué)習(xí)，最近翻看源代碼和 MDN 文檔之后發(fā)現(xiàn)有些知識(shí)沒有理解到位，于是乎有了這篇文章，希望對(duì)讀者更深入了解 Transition 動(dòng)畫有所幫助。（學(xué)習(xí)視頻分享：css視頻教程）

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

什么是 Transition?

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

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

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

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

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

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

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

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

1. 有些 CSS 屬性只支持枚舉值，非黑即白，不存在中間狀態(tài)，例如 visibility: visible; 被修改成 visibility: hidden; 不會(huì)有動(dòng)畫效果，因?yàn)椴淮嬖诳梢娪植豢梢姷闹虚g狀態(tài)。在瀏覽器上的表現(xiàn)是 duration 到了之后元素立即突變?yōu)?hidden。

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

   

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

3. 即使是可過渡的屬性變化，也可能因?yàn)闊o法計(jì)算中間狀態(tài)而失去過渡效果。例如 box-shadow 屬性雖然支持 transition 的動(dòng)畫的，但如果從 "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. 如果某個(gè)屬性值是連續(xù)可計(jì)算的數(shù)值，但是變化前后變成散列的枚舉值，那么過渡也不會(huì)生效。例如從 height: 100px => height: auto 是不會(huì)有動(dòng)畫的。

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

為什么 Transition 動(dòng)畫沒有生效？

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

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

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

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

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

在點(diǎn)擊按鈕的時(shí)候，讓 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í)透明度設(shè)置為 0，向上偏移，active 時(shí)則不偏移且透明度設(shè)置為 1。

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

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

硬邦邦地完全沒有過渡效果，這是為啥？明明已經(jīng)設(shè)置了 transition，且 opacity 和 translateY 都是可計(jì)算可過渡的數(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 動(dòng)畫就生效了。

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

主要困惑的點(diǎn)在于為什么顯示的時(shí)候也需要加 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ā)生時(shí)，實(shí)現(xiàn)（瀏覽器）必須根據(jù)變更的屬性執(zhí)行過渡動(dòng)畫。但如果樣式變更事件發(fā)生時(shí)或上一次樣式變更事件期間，元素不在文檔中，則不會(huì)為該元素啟動(dòng)過渡動(dòng)畫。

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

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

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

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

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

補(bǔ)充一個(gè)小插曲：在查找資料的過程中了解到 requestAnimationFrame 的規(guī)范是要求其回調(diào)函數(shù)在 Style/Layout 等階段之前執(zhí)行，起初 Chrome 和 Firefox 是遵循規(guī)范來實(shí)現(xiàn)的。而 Safari 和 Edge 是在執(zhí)行的時(shí)機(jī)是在之后。 從現(xiàn)在的表現(xiàn)上來看，Chrome 和 Firefox 也改成了在之后執(zhí)行，翻看以前的文檔會(huì)說需要嵌套兩層 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.

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

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

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

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

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

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

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

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

【消失】動(dòng)畫還不夠優(yōu)雅，前面我們是直接寫死 setTimeout 600，讓元素在動(dòng)畫結(jié)束時(shí)消失的。這樣編碼可復(fù)用性差，修改動(dòng)畫時(shí)間還得改兩處地方（JS + CSS），有沒有更優(yōu)雅的實(shí)現(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 時(shí)需要留意 event.target。

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

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

根據(jù)動(dòng)畫過程拆分成幾個(gè)過程：

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

enter-to 和 leave-to 暫時(shí)用不上，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   }); };

這個(gè)組件接收三個(gè) props，分別是

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

使用方式：

<CSSTransition name="fade" active={active}>     // 一個(gè)需要做過渡動(dòng)畫的 ReactElement </CssTransition>

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

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

結(jié)語

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