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

b1payxdu 于 2022-11-19 发布在其他

关注(0)|答案(2)|浏览(128)

[My问题与建议的重复项不同，因为动画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，那么当它在动画开始时崩溃时会有一个不和谐的效果。

css

来源：https://stackoverflow.com/questions/30809575/css-height-transition-in-presence-of-padding-not-covered-by-existing-answers

2条答案

按热度按时间

41zrol4v1#

你好，我想你已经修复了这个问题，因为你很久以前就发布了，但我只是遇到了同样的情况，并提出了自己的解决方案。
基本上，我只是在要显示/隐藏的元素中创建了一个空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;
}

赞(0）回复(0）举报 2022-11-19

polhcujo2#

这部分在更新的答案中，也部分在更新的plnkr链接中，但是我忽略了plnkr链接更新了文章中没有的代码，我转而使用了另一个答案的建议，使用 Package 器div，所以这里是另一个更新的答案：
要使用CSS将高度来自其内容的div转换为滑动打开/关闭动作，应执行以下操作：

使用max-height折叠元素，因为转换到height: auto不起作用
将溢出隐藏与过渡沿着使用，以便在高度更改时正确包含内容
如果你在元素中有填充，你会注意到折叠高度并不能完全折叠元素--因此我们应该在关闭时删除填充。注意：对于余量也是如此。
应该只折迭边框距离/上边界/下边界，这样折迭时内容不会水平移动，因为我们是垂直折迭。如果您要改为透过长度水平折迭，请翻转此选项。

最后一点注意（虽然有点过时），如果你已经在使用JQuery，你可以使用JQuery的slideToggle来完成同样的功能。事实上，它做了几乎完全相同的CSS变化（缩小高度和垂直边距/填充，隐藏溢出），只是用JS而不是CSS过渡。如果你在通过JQuery切换滑动时检查一个元素，你可以看到这一点以获得灵感/记忆。
第一个

赞(0）回复(0）举报 2022-11-19

我来回答

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

2条答案

相关问题

热门标签

最新问答