眾所周知，有些屬性是不支持過渡動畫的，比如高度auto。

div{
  height: 0;
  transition: 1s
}
.wrap:hover div{
  height: auto
}

效果如下：

要實現(xiàn)過渡效果，之前提供過一個grid布局方式，原理是利用grid的尺寸單位1fr支持過渡的特性。

不過到了現(xiàn)在，一切都變簡單了，Chrome 129支持了auto的過渡效果，快速了解一下吧！

一、calc-size 函數(shù)

現(xiàn)在要實現(xiàn)auto的過渡效果，需要用到一個全新的calc-size函數(shù)。

看到這個函數(shù)，是不是和calc比較類似？沒錯，這是一個可以將一些關(guān)鍵詞轉(zhuǎn)換成具體尺寸的函數(shù)。

回到上面這個例子，只需要將高度改成calc-size(auto)，如下：

div{
  height: 0;
  transition: 1s
}
.wrap:hover div{
  height: calc-size(auto)
}

現(xiàn)在就有過渡效果了（Chrome 129+ 或者 Chrome 127+開啟實驗屬性）。

其實除了auto，還支持其他尺寸關(guān)鍵詞，比如：

height: calc-size(min-content)
height: calc-size(max-content)
height: calc-size(fit-content)

也支持混合計算，如下：

height: calc-size(auto + 10px)
height: calc-size(max-content - 10px)

二、interpolate-size 屬性

前面的例子，為了兼容之前的瀏覽器，還必須保留height: auto的寫法。

div{
  height: 0;
  transition: 1s
}
.wrap:hover div{
  height: auto;
  height: calc-size(auto)
}

如果是已經(jīng)存在的項目，可能會有很多地方需要都要改成這種寫法，有一定的侵入性。

為此，瀏覽器還提供了一個interpolate-size屬性，這個屬性可以設(shè)置插值計算的規(guī)則，有兩個關(guān)鍵詞。

interpolate-size: numeric-only;/*默認(rèn)值*/
interpolate-size: allow-keywords;

其中第一個numeric-only，表示僅限數(shù)值，也就是只有真實的數(shù)值才會有過渡效果（目前瀏覽器的默認(rèn)效果），第二個allow-keywords表示允許所有關(guān)鍵詞，當(dāng)然包括auto屬性。

有了這個屬性，要做的事情就更簡單了，只需要在全局:root加上這個屬性。

:root{
  interpolate-size: allow-keywords;
}
div{
  height: 0;
  transition: 1s
}
.wrap:hover div{
  height: auto;
}

這樣就全局生效了，無需在每個地方就加上calc-size(auto)，是不是非常方便呢？

你也可以訪問以下鏈接查看實際效果。

• CSS calc-size (codepen.io)[1]
• CSS calc-size (juejin.cn)[2]

三、也支持 detail 展開過渡

大家可能都知道，detail配合summary可以實現(xiàn)展開折疊效果。

<div class="con">
  <details name="a">
    <summary>分組A</summary>
    <p>這是第一個分組 name="a"</p>
  </details>
  <details name="a">
    <summary>歡迎</summary>
    <p>最近 details元素新增了一個name屬性</p>
  </details>
  <details name="a">
    <summary>關(guān)注</summary>
    <p>別看這只是一個普普通通的屬性，這可是帶來了一個全新的模式，一起了解一下吧</p>
  </details>
</div>

效果如下：

當(dāng)然默認(rèn)展開折疊是沒有過渡效果的。

利用calc-size或者interpolate-size也可以很輕松的實現(xiàn)過渡動畫，關(guān)鍵實現(xiàn)如下：

:root {
  interpolate-size: allow-keywords;
}
::details-content{
  content-visibility: visible;
  height: 0;
  transition: .3s;
  overflow: hidden;
}
details[open]::details-content{
  height: auto;
}

這樣就有過渡效果了，非常絲滑。

這是一段通用代碼，可以用在任何地方。

你也可以訪問以下鏈接查看實際效果。

• CSS details transition (codepen.io)[3]
• CSS details transition (juejin.cn)[4]

四、現(xiàn)在其實可以用起來了

雖然說兼容性很差（Chrome 129+），但這是一個漸進(jìn)增強(qiáng)屬性，不會影響現(xiàn)有功能，也無需修改已有結(jié)構(gòu)，只需要全局增加這樣一行就行了。

:root {
  interpolate-size: allow-keywords;
}

這樣能支持的瀏覽器自然就會有過渡動畫了，完全不用擔(dān)心是否兼容。

總結(jié)一下，其實就兩點：

• calc-size可以將非數(shù)值類型的單位轉(zhuǎn)換成支持過渡的尺寸單位，包括auto。
• interpolate-size可以從全局范圍允許任意關(guān)鍵詞支持過渡。

[1]CSS calc-size (codepen.io)： https://codepen.io/xboxyan/pen/NWQKjGo。

[2]CSS calc-size (juejin.cn)： https://code.juejin.cn/pen/7416950104911216675。

[3]CSS details transition (codepen.io)： https://codepen.io/xboxyan/pen/KKOPmVO。

[4]CSS details transition (juejin.cn)： https://code.juejin.cn/pen/7416957616628170789。