存在填充的 CSS 高度过渡(现有答案未涵盖)

Question

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

试图让一个 div 扩展，没有固定的高度和一些填充。我的 css 在下面，我使用 jquery 切换 .closed。

.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 .现在的问题是关闭时的填充。在上面的例子中，它会过渡出来，如果我将 .closed 中的过渡限制为 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;
}