如何使 max-height 的转换同步工作？

Question

我有 4 个 dropdown 个容器。当我点击 header 时，我希望它的相关段落出现，而其他已经出现的段落消失。

单击 header 时，我会从所有其他段落中删除 active class，并将其添加到单击其 header 的段落中。它工作正常，但问题是首先出现当前段落，然后其他段落消失，但我希望它们同步工作，就像一个出现另一个消失一样，但我不知道该怎么做。

HTML:

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header1</a>
  </div>
  <p class="active">some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header2</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header3</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header4</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

CSS:

.dropDown p{
  background: rgb(245, 245, 245);
  border-right: 40px solid #e8e8e8;
  font-size: 13px;
  line-height: 35px;
  max-height: 0px;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0px 15px 0px 30px;
  transition: max-height .3s ease;
}

.dropDown p.active{
  max-height: 500px;
  padding-top:8px;
  padding-bottom: 20px;
}

jQuery:

Headers.click(function(){
  var theP = $(this).parent().children("p"); //current paragraph
  dropDownParagrsphs.not(theP).removeClass("active");
  theP.toggleClass("active");
});

我怎样才能使过渡协同工作，就像当一个段落的高度降低时，另一段的高度增加？

Answer 1

有趣的是，您在纯 CSS 中偶然发现了一个看似困难的问题。事实是，您的段落已经表现得如您所愿，问题是您指定的最大高度相对于 p 的实际内容很大，给人的印象是它们一个接一个地执行，但这只是因为它花费的时间相对（与溢出的p的实际高度相比：隐藏）长到grow/shrink max-height到500px。这就好像你有一个增长到 500px 的隐形盒子。这个应该可以通过将最大高度更改为自动轻松解决，但不幸的是，您不能在纯 CSS 过渡中设置自动高度动画。你的选择是：

a) 选择一个更接近实际内容大小的不同硬编码最大高度。
b) 使用变换比例(Y)
c) 使用纯 JS：例如 slideUp 和 slideDown

var Headers = $('.header') 
var dropDownParagraphs = $('.dropDown p') 

Headers.click(function(){
  var theP = $(this).parent().children("p"); //current paragraph
    // theP.addClass("active");
  // dropDownParagraphs.not(theP).removeClass("active");
  dropDownParagraphs.not(theP).slideUp(200);
  theP.slideDown(200);

});

检查此代码笔以了解 c) 的实现 https://codepen.io/bakuthe3rd/pen/abvzVJz

Answer 2

您可以使用.slideToogle(duration, easing, callback) 方法来做到这一点。此外，我已将 padding-bottom 和 padding-top 属性从 p.active 转移到 p，以便它们在过渡期间不会发生显着变化。

jQuery:

$('p').slideUp(0); // close all
$('.active').slideToggle(300); // open the default

$('.header').click(function() {
  var nowP = $(this).parent().children("p"); // current paragraph
  var prevP = $('.active'); // opened paragraph
  var isSame = $('p').index(prevP) == $('p').index(nowP);

  prevP.removeClass("active").slideToggle({ duration: 300, queue: false });
  if (!isSame) nowP.addClass("active").slideToggle({ duration: 300, queue: false });
});

$('p').slideUp(0);
$('.active').slideToggle(300);

$('.header').click(function() {
  var nowP = $(this).parent().children("p"); // current paragraph
  var prevP = $('.active'); // opened paragraph
  var isSame = $('p').index(prevP) == $('p').index(nowP);

  prevP.removeClass("active").slideToggle({ duration: 300, queue: false });
  if (!isSame) nowP.addClass("active").slideToggle({ duration: 300, queue: false });
});

.dropDown p {
  background: rgb(245, 245, 245);
  border-right: 40px solid #e8e8e8;
  font-size: 13px;
  line-height: 35px;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0px 15px 0px 30px;
  transition: max-height .3s ease;
  padding-top: 8px;
  padding-bottom: 20px;
}

.dropDown p.active {
  max-height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header1</a>
  </div>
  <p class="active">some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header2</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header3</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header4</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

此外，您会注意到在单击相同的 link 时，下拉菜单将关闭。我已经添加了这个，因为我希望这可能是想要的效果:)

此外，如果您需要线性过渡，您可以添加 'linear' 作为 .slideToggle 方法中的第二个参数。默认情况下，它是 'swing'.

如何使 max-height 的转换同步工作？

how to make my transitions for max-height work synchronously?

javascript

css

jquery

transition