使用 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;
}
复制代码

这样动画的工做原理，咱们仍然获得咱们想要的效果。过渡时间可能须要根据您须要的效果进行调整。