動畫期間隱藏捲軸

CSS 仍然無法動畫到自動尺寸。

 .dropdown {
  transition: 0.2s;
  height: 0;
}
.dropdown.open {
  /* 高度會改變，但不會動畫。 */
  height: auto;
}

您可以嘗試使用JavaScript 技巧。 Brandon Smith不久前在此處概述了幾種技術。我一直想到這個解決方案，因為它非常簡單：

 .dropdown {
  transition: 0.2s;
  max-height: 0;
}
.dropdown.open {
  /* ? */
  max-height: 400px;
}

現在我們有了這個400px 的神奇數字，這真的不太理想。但是，這個方法有效且如此簡單的事實使其極具吸引力，以至於我一直都在生產環境中使用它。

但是神奇數字並不是唯一的問題。另一個問題是滾動條。

當我們設置max-height: 0;時，我們還需要overflow: hidden;來確保下拉菜單在關閉時實際上是隱藏的。當下拉菜單打開時，我們可能應該使用overflow: auto; ，這樣我們就可以在下拉菜單的自然高度超過展開後的max-height的情況下，不會意外地切斷內容。使用overflow: auto;解決了這個問題，但又引入了另一個問題：在展開期間，我們的下拉菜單將始終至少在展開的一部分時間內顯示滾動條，即使最終展開高度不需要它們也是如此。這很尷尬！

CSS 技巧來救援。

我們仍然可以在展開狀態下使用overflow: auto; ——我們只需在動畫期間覆蓋它即可。正如我們在偉大的CSS 特異性之戰中學到的那樣， @keyframes具有在它們活動時覆蓋任何內容的驚人能力。讓我們使用它們不是為了動畫打開，而是為了這個隱藏滾動條的功能：

 .dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.2s ease-in-out;
}
.dropdown.open {
  overflow: auto;
  max-height: 400px;
  animation: hide-scroll 1.2s backwards;
}
@keyframes hide-scroll {
  from, to { overflow: hidden; }
}

這就行了！

嘗試將高度調整為較小的值，看看您如何在動畫期間看不到滾動條，而只有在需要時才會在最後看到。這會在滾動條彈出時導致一點抖動，但在我的情況下這是可以接受的，因為它很少發生。如果您絕對想要停止抖動，您可能需要始終將（自定義）滾動條應用於下拉菜單，並且可能根據需要調整動畫期間滾動條的樣式。

此處要感謝@keyframers 的Stephen Shaw 先生的這個技巧。在我為CodePen 上的東西工作時，我把他拉來幫我解決這個問題。我們決定將這個技巧變成CodePen 頻道的視頻，展示協作模式，我們用它來找出問題/解決方案：

以上是動畫期間隱藏捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章！