选项卡式元素上的动画 CSS 过渡答案

【问题标题】：Animated CSS transition on a tabbed element选项卡式元素上的动画 CSS 过渡
【发布时间】：2016-05-07 06:00:10
【问题描述】：

我有一个具有不同标签高度的 jQuery 选项卡元素。外部 div 具有动态高度，但我希望它在内部元素更改选项卡时平滑调整大小。

我当前的 CSS 是：

.parent{
  width:500px;
  background:green;
  padding:20px;
  transition:all 1s;

}

.tab1{
  width:300px;
  height:100px;
  background:red;
}

.tab2{
  width:300px;
  height:500px;
  background:blue;
  display:none;
}

.parent button{
  display:inline-block;
  vertical-align:middle;
}

这个小提琴显示了行为：https://jsfiddle.net/mh5b91gx/

我尝试过使用 min-height 和 max-height 但无法完成。你们能帮帮我吗？

【问题讨论】：

你的意思是这样的：jsfiddle.net/mh5b91gx/3
aghilpro 的另一个变体：jsfiddle.net/mh5b91gx/4（可能在 CSS 和 HTML 中进行了无意义的更改，我在保存之前忘记删除）
css-tricks.com/box-sizing

标签： javascript css

【解决方案1】：

在不更改您的 HTML 的情况下，我能想出的最接近的方法是：http://codepen.io/BenCodeZen/pen/rePLpP，但从用户的角度来看，它很笨拙，我不建议这样做。

$('#tab1').on('click', function(event) {
    $('.tab2').slideUp(400);
    $('.tab1').delay(400).slideDown();
    /* Act on the event */
});


$('#tab2').on('click', function(event) {
    $('.tab1').slideUp(400);
    $('.tab2').delay(400).slideDown(400);
    /* Act on the event */
});

您的代码的主要问题是您在此过程中替换了整个 div。这意味着您没有统一的容器来平滑过渡高度。所以第一步肯定是改变你的 HTML 结构，拥有一个使用 JavaScript 或 jQuery 来改变内容的内容 div。

以下是它的外观示例：

<div class='parent'>

  <button id="tab1">Tab1</button>
  <button id="tab2">Tab2</button>

  <div class="content">
    <div id="tab1-content" class="tab-content">...</div>
    <div id="tab2-content" class="tab-content">...</div>
  </div>

</div>

我绝对建议您查看 @Asta 的有机标签文章，但如果您有任何其他问题，请告诉我！

【讨论】：

【解决方案2】：

您可以查看 CSS Tricks 上的 Organic Tabs：https://css-tricks.com/organic-tabs/。

【讨论】：

【解决方案3】：

你可以试试这个：

$('#tab1').on('click', function(event) {

    $('.tab2').hide('slow');
    $('.tab1').show('slow');
    /* Act on the event */
});

$('#tab2').on('click', function(event) {

    $('.tab1').hide('slow');
    $('.tab2').show('slow');
    /* Act on the event */
});

【讨论】：