添加元素時如何通過展開/折疊 div 來制作動畫

Question

我正在制作一個待辦事項列表，您可以在單擊任務時看到任務的描述，基本上我將描述的顯示從display: none; display: block; ，問題是當我使描述可見時，父 div 突然改變高度，我想對其進行動畫處理以使其更平滑。

 const tasks = document.querySelectorAll('.task') tasks.forEach(x => { x.onclick = () => { x.querySelector('.description').classList.toggle('show') if (x.className == 'task flex') { x.className = 'task grid' } else { x.className = 'task flex' } } })

 * { font-family: poppins; margin: 0; padding: 0; box-sizing: border-box; } .project { background-color: teal; color: var(--white); display: grid; grid-template: 1fr 2fr / 1fr; border-radius: 10px; } .project * { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; } .project h3 { align-items: center; font-size: 1.5rem; font-weight: 500; margin-bottom: 1.5rem; color: #ffffff; } .tasks { align-items: flex-start; gap: 0.5rem; padding: 0 1rem 1rem; } .task { background-color: rgb(251, 238, 202); color: rgb(37, 36, 34); border-radius: 10px; } .flex { display: flex; flex-direction: row; align-items: center; padding: 0.5rem 0.5rem 0.5rem 0.75rem; } .grid { display: grid; grid-template: 1fr 1fr / 5fr 5fr 15px; grid-template-areas: none; padding: 0.5rem 0.5rem 0.5rem 0.75rem; grid-template-areas: 'task date del' 'desc desc desc'; } .title { font-size: 18px; line-height: 25px; grid-area: task; } .description { display: none; color: rgba(0, 0, 0, 0.6); font-size: 1rem; margin-left: 0.5rem; grid-area: desc; } .show { transform: scaleY(1); transition: transform 1s ease 0ms; display: block; } .date { color: var(--main-dark); font-style: italic; text-align: right; padding-right: 1rem; grid-area: date; }

 <div class="project"> <h3>Default project</h3> <div class="tasks"> <div class="task flex"> <p class="title">Water the plants</p> <p class="description">Tulips and Roses</p> <p class="date">18 Jun 2022</p> </div> <div class="task grid"> <p class="title">Feed the dog</p> <p class="description show">Chicken breast and bone</p> <p class="date">18 Jun 2022</p> </div> <div class="task flex"> <p class="title">Do the dishes</p> <p class="description">From lunch</p> <p class="date">18 Jun 2022</p> </div> </div> </div>

Answer 1

我垂直折疊內容的標准是max-height屬性。

從理論上講，它非常簡單。

你有一個max-height: 0px;的元素和max-height: 300px; . 然后你可以像這樣添加一個過渡： transition: max-height 0.5s ease; 它會起作用。 但是，使用純 CSS 執行此操作有一個問題。

編輯// 記得給你的折疊內容overflow: hidden;

想象一下，您的內容是用戶提交的，就像您的情況一樣。 描述可以是 200px、500px 甚至 0px 的高度。

如果您的內容為 300 像素，一切都會像魅力一樣工作和動畫，因為您完美地達到了您定義的限制。

在您的內容較小的情況下，例如 200px，動畫會有所不同，因為它仍然是從0px到300px的動畫。 您的內容在300px像素處200px擴展，因此它比 300 像素元素的擴展速度更快。 事實上，將元素折疊回0px將導致大約 1/3 的動畫時間延遲，因為元素將保持在200px直到過渡從300px變為200px 。 只有這樣它才會開始崩潰。

當然，總是可以選擇不打擾並將max-height設置為您的用例的合理默認值。

只要我知道AlpineJS ，一個非常易於使用的最小 JS 框架，我就不必為此煩惱，因為Collapse Plugin將為我完成所有 JS 計算，以便內容始終完美過渡。 AlpineJS 折疊

如果你不想為此使用 JS 框架，這里有一個關於如何使用 JS 計算元素高度的簡單說明，你可以在這里查看： W3Schools Collapsible

我只能建議看一下它，或者忍受硬編碼默認300px左右的后果。

Answer 2

這是我制作動畫的方式，其中 max-height 是超過元素最大高度的任何高度，如果您有最小高度，您也可以指定它

#elementThatWillExpand
{
min-height:10px;
max-height:2000px;
transition:height 2s;
overflow:hidden;
}

所以這應該工作，只是改變

.show {
  transform: scaleY(1);
  transition: transform 1s ease 0ms;
  display: block;
}

至

.show {
  display: block;
  max-height:3000px;
  transition:height 1s;
  overflow:hidden;
}