使用 CSS 动画元素的大小

Question

我正在尝试为 .folder 的大小设置动画，否则背景会保留。

- 运行代码 sn-p。它将解释问题。

我不想要设置固定值：

.enabled > .folder-body {
  height: 100px;
}

:not(.enabled) > .folder-body {
  height: 0px;
}

我尝试使用转换，但我无法让它工作。

(Styled Version)

const folder = document.querySelector('#folder');

const header = document.querySelector('#header');

header.addEventListener('click', () => {
  folder.classList.toggle('enabled');
});

p {
  margin: 0;
}

.folder {
  border: 2px solid black;
  overflow: hidden;
}

.folder-header {
  display: flex;
  align-items: center;
  color: white;
  background-color: black;
}

.folder-header>svg {
  height: 15px;
  fill: white;
  transition: all 0.2s ease-out;
}

.enabled>.folder-header>svg {
  transform: rotateZ(90deg);
}

.folder-body {
  transition: all 0.2s ease-out;
}

.enabled>.folder-body {
  transform: none;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  visibility: visible;
}

:not(.enabled)>.folder-body {
  transform: translateY(-100%);
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  visibility: hidden;
}

<div class="folder disabled" id="folder">
  <div class="folder-header" id="header">
    <svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path d="m3 0 17 10-17 10z" />
    </svg>
    <h2>Menu</h2>
  </div>
  <p class="folder-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur fugit porro aliquid hic! Reiciendis a possimus esse aliquid magni optio sapiente in labore reprehenderit nostrum ipsum odit eveniet magnam necessitatibus aliquam, minima est? Ipsum quae
    sunt eum exercitationem dolorem animi expedita est quidem sapiente, eos ducimus iure praesentium quo, eaque possimus perspiciatis maxime doloribus hic beatae sit libero? Aperiam eveniet saepe recusandae repellendus magni similique delectus cum, inventore
    veniam! Exercitationem, beatae? Temporibus libero quam, velit eligendi quo voluptatibus asperiores iusto vero adipisci fugit nesciunt. Minima magnam incidunt, ad illo minus commodi ducimus esse tenetur adipisci similique harum optio aliquam delectus.
  </p>
</div>

Answer 1

height: 0 到 height: auto 的示例。

const folder = document.querySelector('#folder');

const header = document.querySelector('#header');

header.addEventListener('click', () => {
  folder.classList.toggle('enabled');
});

p {
  margin: 0;
}

.folder {
  overflow: hidden;
}

.folder-header {
  display: flex;
  align-items: center;
  color: white;
  background-color: black;
  padding: 0 10px;
}

.folder-header>svg {
  height: 15px;
  fill: white;
  transition: all 0.2s ease-out;
}

.enabled>.folder-header>svg {
  transform: rotateZ(90deg);
}

.folder-body {
  transition: all 0.2s ease-out;
  height: 0;
  border: 2px solid black;
  box-sizing: border-box;
  padding: 0px;
}

.enabled>.folder-body {
  padding: 10px;
}

.enabled>.folder-body {
  transform: none;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  visibility: visible;
  height: auto;
}

:not(.enabled)>.folder-body {
  transform: translateY(-100%);
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  visibility: hidden;
}

<div class="folder disabled" id="folder">
  <div class="folder-header" id="header">
    <svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path d="m3 0 17 10-17 10z" />
    </svg>
    <h2>Menu</h2>
  </div>
  <p class="folder-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur fugit porro aliquid hic! Reiciendis a possimus esse aliquid magni optio sapiente in labore reprehenderit nostrum ipsum odit eveniet magnam necessitatibus aliquam, minima est? Ipsum quae
    sunt eum exercitationem dolorem animi expedita est quidem sapiente, eos ducimus iure praesentium quo, eaque possimus perspiciatis maxime doloribus hic beatae sit libero? Aperiam eveniet saepe recusandae repellendus magni similique delectus cum, inventore
    veniam! Exercitationem, beatae? Temporibus libero quam, velit eligendi quo voluptatibus asperiores iusto vero adipisci fugit nesciunt. Minima magnam incidunt, ad illo minus commodi ducimus esse tenetur adipisci similique harum optio aliquam delectus.
  </p>
</div>

Answer 2

您可以通过将元素的 max-height 设置为比您的框所能容纳的更大的值来实现。
然后你可以通过设置max-height: 0来关闭它。

我没有想到这一点。这是CSS Tricks 的文章和dev.to 上的帖子。

const folder = document.querySelector('#folder');

const header = document.querySelector('#header');

header.addEventListener('click', () => {
  folder.classList.toggle('enabled');
});

p {
  margin: 0;
}

.folder {
  border: 2px solid black;
  overflow: hidden;
}

.folder-header {
  display: flex;
  align-items: center;
  color: white;
  background-color: black;
}

.folder-header>svg {
  height: 15px;
  fill: white;
  transition: all 0.2s ease-out;
}

.enabled>.folder-header>svg {
  transform: rotateZ(90deg);
}

.folder-body {
  max-height: 500px;
  transition: all 0.2s ease-out;
}

.enabled>.folder-body {
  max-height: 500px;
}

:not(.enabled)>.folder-body {
  max-height: 0;
}

<div class="folder disabled" id="folder">
  <div class="folder-header" id="header">
    <svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <path d="m3 0 17 10-17 10z" />
    </svg>
    <h2>Menu</h2>
  </div>
  <p class="folder-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur fugit porro aliquid hic! Reiciendis a possimus esse aliquid magni optio sapiente in labore reprehenderit nostrum ipsum odit eveniet magnam necessitatibus aliquam, minima est? Ipsum quae
    sunt eum exercitationem dolorem animi expedita est quidem sapiente, eos ducimus iure praesentium quo, eaque possimus perspiciatis maxime doloribus hic beatae sit libero? Aperiam eveniet saepe recusandae repellendus magni similique delectus cum, inventore
    veniam! Exercitationem, beatae? Temporibus libero quam, velit eligendi quo voluptatibus asperiores iusto vero adipisci fugit nesciunt. Minima magnam incidunt, ad illo minus commodi ducimus esse tenetur adipisci similique harum optio aliquam delectus.
  </p>
</div>