トランスフォームを使用してコンテンツを非表示にすると、次のコンテンツが崩壊する

Question

私は、お互いに後に続く小さなボックスを持ち、ユーザーがこれらの要素の表示/非表示を切り替えることができるようにしたいという状況があります。私は彼らが私の望むように働いているが、それぞれのボックスが折りたたまれている/隠されているときは、その下のコンテンツは上向きに崩壊しない。

私はこれがなぜあるのか理解していますが、transformを使用すると、元の位置から変換した要素のスペースが割り当てられるためです。しかし、何かの理由でmargin-topという否定記号を使用するのと同じように、変換のようにスムーズにアニメートできなかったのと同じ方法で別の方法を実行することができませんでした。

CodePen：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を使用するようなハッキーソリューションは避けてください。

Answer 1

あなたの問題、原因margin : -100%に開始の遅延とのdivは、CSSトランジションを追加またはクラスを削除すると、それだけでアニメーション化されますアニメーション化していないmargin : -40%

と

ではまだ表示されていませんCSSプロパティを変更したとき。あなたはクラスを直接追加したり削除したりしています。ここで

は、jQueryのことで、これを取得する別の方法です：

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

は、あなたが何のブラウザを使用しているCodepen