使用 CSS Transition 經過改變 Height 來展開收起元素

這是我參與8月更文挑戰的第5天，活動詳情查看：8月更文挑戰

一個常見的開發須要，咱們但願摺疊元素的一部分，直到須要它爲止。一些常見的框架（如 Bootstrap 和 JQuery）提供了轉換效果。然而，CSS Transition 在轉換高度方面給予了咱們很大的靈活性。所以，您沒必要在項目中加入其餘框架。

下面咱們看看，如何使用 CSS Transition 設置 height 屬性的動畫效果以及其存在的問題、解決方案。

你能夠在👉查看效果

過渡高度

咱們要實現的操做是，當點擊查看更多按鈕將增長元素的高度，以顯示文章的全部內容，再次點擊時，它將收回到本來的樣子。

咱們將爲此建立一個 CSS 類。單擊查看更多按鈕時，將使用 JavaScript 將此類添加到 <article> 元素上。

首先，咱們將向 HTML 文件添加一個

元素，併爲其添加一些內容。

<article id="article">
  <h3>使用 CSS Transition 經過改變 Height 來展開收起元素</h3>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo perspiciatis tempora iure accusamus rerum. Fuga porro unde, laboriosam soluta accusantium numquam quos adipisci commodi velit, expedita officia cum excepturi molestias.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio, eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut voluptates reiciendis iusto.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio, eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut voluptates reiciendis iusto.</p>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab doloribus optio, eaque harum blanditiis totam voluptatibus amet quibusdam veritatis animi ipsum eveniet modi aspernatur, vel repellat est commodi consequatur unde! A obcaecati soluta inventore, numquam impedit quaerat magnam incidunt sit cupiditate sequi cum. Exercitationem commodi reiciendis culpa iste optio aliquam incidunt at, ab consectetur quae est sapiente dignissimos, sit deleniti voluptatibus animi repudiandae. Itaque nemo laborum dolore numquam repudiandae mollitia quis. Placeat quis architecto eligendi distinctio quas perferendis officia voluptatem illo, nisi ullam voluptatum odio eveniet non eum vero vel dolorum deleniti adipisci culpa. Reprehenderit cum ut voluptates reiciendis iusto.</p>
</article>
<button id="seeMoreBtn">查看更多</button>
複製代碼

CSS 樣式以下：

article {
  max-width: 800px;
  height: 300px;
  overflow-y: hidden;
}

/* 單擊按鈕時添加此類 */
article.extended {
  height: 628px;
}

button {
  padding: .6rem;
}
複製代碼

JavaScript 以下：

const seeMore = document.getElementById('seeMoreBtn')
const article = document.getElementById('article')

seeMore.addEventListener('click', () => {
  article.classList.toggle('extended')

  const extended = article.classList.contains('extended')
  if (extended) {
    seeMore.innerHTML = '收起內容'
  } else {
    seeMore.innerHTML = '查看更多'
  }
})
複製代碼

向 article 添加 CSS transition 過渡屬性，使其點擊按鈕時內容能夠絲滑的上下滑動。

article {
  max-width: 800px;
  height: 300px;
  overflow-y: hidden;
  transition: height 0.4s linear;
}
複製代碼

如今將它應用到你的文章，你能夠看到它能夠上下絲滑的滑動着，很簡單、方便，但此方法存在的限制。下面咱們來看看。

限制

這個限制體如今是否知其高度，以上的例子咱們清楚的知道文章的高度，它工做的效果很是好，但當咱們在處理動態內容時，咱們不知道元素的高度，其高度也可能隨着屏幕大小或其餘方式進行變化。

其實解決方式也很簡單，對於動態內容，元素的高度應設置爲 auto。這樣，任何增長或減小的元素高度都將自適應。但也會出現另外一個問題：當元素的高度設置爲 auto 時，CSS transition 將不起做用。

好消息是，有一種方法能夠解決此問題，而沒必要求助於更多的 JavaScript。

解決方案

解決方法是轉換 max-height 屬性而不是 height 屬性。首先，咱們必須估計咱們的元素能達到的最大高度。而後，當元素展開時，咱們將該元素設置爲 max-height 大於咱們的估計值。

咱們將 height 屬性改成 max-height：

article {
    max-width: 800px;
    max-height: 300px;
    overflow-y: hidden;

    /* 增長過渡時間以適應高度 */
    transition: max-height 0.7s linear;
}

article.expanded {
    max-height: 1500px;
}
複製代碼

這樣動畫的工做原理，咱們仍然獲得咱們想要的效果。過渡時間可能須要根據您須要的效果進行調整。