内容可变的元素的动画高度

Question

我有一张卡片列表，单击该卡片时应显示摘要。

显示新的摘要时，摘要容器会以动画方式移动到与其关联的卡片对齐（顶部）的位置。

由于摘要内容可能会有所不同，因此我还希望为摘要容器的高度设置动画，但是无论我尝试如何*，容器的高度都只是在没有任何过渡的情况下“捕捉”。

*尝试1

$('.summary > div').css({'height':0,'overflow':'hidden'});
$('.summary > div[data-content="'+ activeIndex +'"]').css({'height':'initial'});

*尝试2

$('.summary > div').fadeOut();
$('.summary > div[data-content="'+ activeIndex +'"]').fadeIn();

*尝试3

$('.summary > div').animate({'height':0, 'overflow':'hidden'});
$('.summary > div[data-content="'+ activeIndex +'"]').animate({height:'initial', 'overflow':'visible'},200);

在我的CSS中，我使用transition: all 2s ease;尝试设置边距顶部和高度的动画。

我在下面设置了一个测试用例，最好在“整页”中运行：

$(document).ready(function() {
  alignSummary = function() {
    // Animate the summary panel
    $('.summary').css({
      'margin-top': ($('.card.is-active')[0].offsetTop - 50)
    })

    // Show/hide the relevant summary content
    var activeIndex = $('.card.is-active').index();
    $('.summary > div').hide();
    $('.summary > div[data-content="' + activeIndex + '"]').show();
  }
  alignSummary();
});

$('.card').on('click', function() {
  // Do this if a card with a greater index is clicked
  if ($(this).closest('.card').index() > $('.card.is-active').index()) {
    // Scroll the window to the top of the active card
    $([document.documentElement, document.body]).animate({
      scrollTop: ($(this).closest('.card').offset().top - 20)
    }, 800);
  }

  // Swap the active class to the card clicked
  $(this).closest('.card').siblings().removeClass('is-active');
  $(this).closest('.card').addClass('is-active');
  alignSummary();
})

body {
  margin: 0;
}

.container {
  padding: 25px;
  overflow: hidden;
}

.card,
.summary {
  margin-bottom: 1rem;
  border: 1px solid #e3e3e3;
  padding: 1rem;
  border-radius: 4px;
  width: 49%;
}

.card.is-active {
  border-color: red;
}

.card {
  float: left;
}

.summary {
  float: right;
  width: 40%;
  transition: all 2s ease;
}

div[data-content="1"] {
  height: 500px;
}

div[data-content="2"] {
  height: 100px;
}

div[data-content="3"] {
  height: 400px;
}

div[data-content="4"] {
  height: 1200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="summary">
    <div data-content="1">
      <h2>Variable height summary 1</h2>
      <p>Some content: 500px height</p>
    </div>
    <div data-content="2">
      <h2>Variable height summary 2</h2>
      <p>Some content: 100px height</p>
    </div>
    <div data-content="3">
      <h2>Variable height summary 3</h2>
      <p>Some content: 400px height</p>
    </div>
    <div data-content="4">
      <h2>Variable height summary 4</h2>
      <p>Some content: 1200px height</p>
    </div>
  </div>
  <div class="card is-active">Click me</div>
  <div class="card">Click me</div>
  <div class="card">Click me</div>
  <div class="card">Click me</div>


</div>

Answer 1

您可以使用jquery的.slideUp/.slideDown而不是.hide/.show来设置高度的动画。

$(document).ready(function() {
  alignSummary = function() {
    // Animate the summary panel
    $('.summary').css({
      'margin-top': ($('.card.is-active')[0].offsetTop - 50)
    })

    // Show/hide the relevant summary content
    var activeIndex = $('.card.is-active').index();
    $('.summary > div').slideUp(1000);
    $('.summary > div[data-content="' + activeIndex + '"]').slideDown(1000);
  }
  alignSummary();
});

$('.card').on('click', function() {
  // Do this if a card with a greater index is clicked
  if ($(this).closest('.card').index() > $('.card.is-active').index()) {
    // Scroll the window to the top of the active card
    $([document.documentElement, document.body]).animate({
      scrollTop: ($(this).closest('.card').offset().top - 20)
    }, 800);
  }

  // Swap the active class to the card clicked
  $(this).closest('.card').siblings().removeClass('is-active');
  $(this).closest('.card').addClass('is-active');
  alignSummary();
})

body {
  margin: 0;
}

.container {
  padding: 25px;
  overflow: hidden;
}

.card,
.summary {
  margin-bottom: 1rem;
  border: 1px solid #e3e3e3;
  padding: 1rem;
  border-radius: 4px;
  width: 49%;
}

.card.is-active {
  border-color: red;
}

.card {
  float: left;
}

.summary {
  float: right;
  width: 40%;
  transition: all 2s ease;
}

div[data-content="1"] {
  height: 500px;
}

div[data-content="2"] {
  height: 100px;
}

div[data-content="3"] {
  height: 400px;
}

div[data-content="4"] {
  height: 1200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="summary">
    <div data-content="1">
      <h2>Variable height summary 1</h2>
      <p>Some content: 500px height</p>
    </div>
    <div data-content="2">
      <h2>Variable height summary 2</h2>
      <p>Some content: 100px height</p>
    </div>
    <div data-content="3">
      <h2>Variable height summary 3</h2>
      <p>Some content: 400px height</p>
    </div>
    <div data-content="4">
      <h2>Variable height summary 4</h2>
      <p>Some content: 1200px height</p>
    </div>
  </div>
  <div class="card is-active">Click me</div>
  <div class="card">Click me</div>
  <div class="card">Click me</div>
  <div class="card">Click me</div>


</div>