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

Question

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

我明白为什么会这样,因为使用transform它仍然为你转换出原始位置的元素分配空间; 但是我无法用另一种方式来做同样的方式,因为margin-top出于某种原因使用负片并不像变换那样平滑地动画.

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,希望避免像使用非常高的hacky解决方案,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