Question

我有一个带有不同标签高度的jQuery标签元素。外部div具有动态高度，但是当内部元素更改标签时，我希望它能够平滑地调整大小。

我目前的CSS是：

>>> out = priv.exportKey()
>>> new = RSA.importKey(out)
>>> new == priv
True

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

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

Answer 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结构，使用一个内容div，使用JavaScript或jQuery来改变内容。

以下是它的外观示例：

<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的Organic Tabs文章，但如果您有任何其他问题，请与我们联系！

Answer 2

您可以在CSS技巧上查看有机标签：https://css-tricks.com/organic-tabs/。

Answer 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 */
});

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

3 个答案: