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;
        }

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

1 个答案: