存在填充时的 CSS 高度过渡（现有答案未涵盖）

Question

[我的问题与建议的重复问题不同，因为我的动画 div 中存在填充]

尝试让 div 展开，没有固定的高度和一些填充。我的 css 如下，我.closed使用 jquery 切换。

.slide {
  padding: 10%;
  background-color: gold;
  overflow-y: hidden;
  transition: height 2s;
  transition: max-height 2s;
  height: auto;
  max-height: 1000px;
}

.closed {
  height: 0;
  max-height: 0;
}

问题是，使用填充，您无法隐藏开始的文本，并且如果没有固定的高度，您将无法获得过渡的 css 更改。任何人都可以帮忙 - 希望我不需要用 javascript 做更多的事情吗？

更新我现在必须：

.slide {
  padding: 10%;
  background-color: gold;
  overflow-y: hidden;
  transition: max-height 2s ease;
  max-height: 500px;
}

.closed {
  max-height: 0;
  padding: 0;
  transition: all 2s ease;
}

参见plnkr。现在的问题是关闭时的填充。在上面的情况下，它会过渡出来，如果我将 .close 中的过渡限制为max-height那么就会出现不和谐的效果，因为它会在动画开始时崩溃。

Answer 1

您好，我想您现在已经解决了这个问题，就像您很久以前发布的那样，但我刚刚遇到了同样的情况并提出了自己的解决方案。

基本上我只是在您要显示/隐藏的元素中创建了一个空 div 并对其应用了填充。

<ul class="dropdown-menu" role="menu">
    <div class="padding-div">
          <li>menu-item</li>
          <li>another-menu-item</li>
          <li>yet-another-menu-item</li>
     </div>
</ul>


.dropdown-menu {
    display: block;
    position: absolute;
    background: #fff;
    list-style: none;
    overflow: hidden;
    max-height:0;
    transition: max-height 0.7s ease-in;
    right: 0;
    top: 60px;
    width: 125px;
}

.padding-div {
    padding: 20px;

    /* Whatever you need to position everything correctly again eg.*/
    position: relative;
    right: 10px;
    text-align: center;
}