高度：0； 溢出：隐藏； 不使用填充

Question

我有这段代码，我的目标是使自定义 select 平滑 animation。我选择让我的高度默认为 0 溢出：隐藏，并将高度设置为自动 when.active 添加。 但是遇到了仍然显示身体的问题。 问题似乎与填充有关

 .select-header { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 35px 0 20px; background-color: #D6E7D2; cursor: pointer; transition: background 0.5s; }.select-body { height: 0; overflow: hidden; padding-top: 27px; padding-left: 20px; padding-bottom: 31px; background-color: #DCE9D9; transition: all 0.5s; }.select.active.select-body { height: auto; }.select-item { line-height: 35px; cursor: pointer; color: #499A18; }.select-item:not(:last-child) { padding-bottom: 12px; }

 <div class="select accordion"> <div class="select-header"> <span class="select-current">City</span> <div class="select-icon"></div> </div> <div class="select-body"> <div class="select-item">Canandaigua, NY</div> <div class="select-item">New York City</div> <div class="select-item">Yonkers, NY</div> <div class="select-item">Sherrill, NY</div> </div> </div>

我试过将身体放入容器中 - 没有用。 并在添加 padding.active 时添加填充 - 这会导致意外的过渡行为。

Answer 1

这里真正的问题是你不能从height: 0;开始动画。 （尺寸值）到height: auto; （关键字值），它们必须都是尺寸值。 您需要知道确切的展开高度。 您可以做的是将max-height从0动画化到某个应该始终大于内容的非常大的尺寸； 在我的示例中，我使用200vh （视口高度的两倍）。
此外，只需像处理高度一样应用和删除填充。

 const toggle = document.querySelector('.select-header') toggle.addEventListener('click', () => toggle.parentElement.classList.toggle('active'))

 .select-header { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 35px 0 20px; background-color: #D6E7D2; cursor: pointer; transition: background 0.5s; }.select-body { height: auto; max-height: 0; overflow: hidden; padding-top: 0; padding-left: 20px; padding-bottom: 0; background-color: #DCE9D9; transition: all 0.5s; }.select.active.select-body { max-height: 200vh; padding-top: 27px; padding-bottom: 31px; }.select-item { line-height: 35px; cursor: pointer; color: #499A18; }.select-item:not(:last-child) { padding-bottom: 12px; }

 <div class="select accordion"> <div class="select-header"> <span class="select-current">City</span> <div class="select-icon"></div> </div> <div class="select-body"> <div class="select-item">Canandaigua, NY</div> <div class="select-item">New York City</div> <div class="select-item">Yonkers, NY</div> <div class="select-item">Sherrill, NY</div> </div> </div>