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

Question

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

我理解为什么会这样，这是因为使用 transform 它仍然为您从原始位置转换出来的元素分配空间；但是我无法想出另一种方法来以与使用负 margin-top 相同的方式来完成它，出于某种原因没有像 transform 那样流畅地制作动画。

代码笔: http://codepen.io/gutterboy/pen/GqRoJY

CodePen(边缘顶部版本): 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 等骇人听闻的解决方案，最好避免使用使用任何 JS 制作动画。

Answer 1

您的问题，由于 margin : -100% 而延迟启动，并且 div 在 margin : -40% 时仍然不可见

和

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

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

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

已更新 Codepen