使用转换隐藏内容时使以下内容折叠

Question

我有一种情况，例如，我有一个一个接一个的小盒子，我希望用户能够切换这些元素的显示/隐藏，我让它们按我想要的方式工作，但是当相应的框被折叠/隐藏它下面的内容也不会向上折叠。

我理解为什么会这样，这是因为使用transform 它仍然为您从其原始位置转换出来的元素分配空间；但是，由于某种原因，我无法以与使用负数 margin-top 相同的方式找到另一种方法来实现它的动画效果，而不像 transform 那样流畅。

CodePen： http://codepen.io/gutterboy/pen/GqRoJY

CodePen（margin-top 版本）： http://codepen.io/gutterboy/pen/WxNGVG

HTML：

<div class="foo">
    <header>
        Header
        <a href="#" class="toggle" data-content-id="1">Toggle</a>
    </header>
    <div class="content-wrap">
        <div id="content-1" class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
            Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
        </div>
    </div>
</div>
<div class="foo">
    <header>
        Header
        <a href="#" class="toggle" data-content-id="2">Toggle</a>
    </header>
    <div class="content-wrap">
        <div id="content-2" class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
            Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
        </div>
    </div>
</div>
<div class="foo">
    <header>
        Header
        <a href="#" class="toggle" data-content-id="3">Toggle</a>
    </header>
    <div class="content-wrap">
        <div id="content-3" class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
            Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
        </div>
    </div>
</div>

CSS (SCSS)：

.foo {
    margin: 10px;
    width: 400px;

    header {
        padding: 10px;
        border: 1px solid #000;
        border-bottom: 2px solid #000;
    }

    .content-wrap {
        overflow-y: hidden;
        transform-style: preserve-3d;
    }

    .content {
        padding: 10px;
        background-color: gray;
        transform: translateY(0);
        border: 1px solid #000;
        border-top: none;
        transition: 1s;

        &.closed {
            transform: translateY(-100%);
        }

    }

}

JS（jQuery）：

$(document).ready(function() {

    $('.toggle').on('click', function(e) {

        e.preventDefault();

        var content_id = $(this).data('content-id');

        $('#content-' + content_id).toggleClass('closed');

    });

});

有没有办法让下面的框在进行中的框同时折叠平滑？

还要注意，盒子的高度是可变的，因此我们不能使用height，希望避免使用非常高的max-height 之类的hacky 解决方案，并且最好避免使用任何JS 来制作动画。

Answer 1

您的问题，由于margin : -100% 导致启动延迟，并且在margin : -40% 上仍然看不到 div

和

CSS 过渡添加或删除类时不动画，它只会在您更改 CSS 属性时动画。而你直接添加和删除类。

这是另一种通过 jQuery 获取的方法：

$('.toggle').on('click', function(e) {
  var content_id = $(this).data('content-id');
  $('#content-' + content_id).slideToggle('slow');
});

更新Codepen