自動サイズのフレックスボックスレイアウトにCSSトランジションまたはJavascriptアニメーションを追加する

Question

.expandsを使用して、.expandedの自動サイズのフレックスボックスエレメントの子クラスを.hiddenのように切り替えることを試しています。

ような何か：

const expandClick = e => { 
    e.currentTarget.querySelectorAll('.expanded').forEach(child => { 
    child.classList.toggle('hidden') 
    }) 
} 

document.querySelectorAll('.expands').forEach(expandable => { 
    expandable.addEventListener('click', expandClick) 
}) 

https://jsfiddle.net/vpc8khq8/

私の内側のコンテンツがdisplay: none属性を失ったとき、私はわずかなバウンスと一緒に容易にする高さを好むだろうが、私はどのように非常にわからないんだけどバニラCSSの移行やJSのピンチでそれを取り除く。

が、私はこの記事に出くわした： How can I transition height: 0; to height: auto; using CSS?

しかし、回答の多くは、より単純で、軽量なソリューションよりも奇副作用や過剰JS/CSSでハックのように思えます。

これはjQueryを使ってトリックを行います。https://jsfiddle.net/cm7a9jr7/

const expandClick = e => { 
    $(e.currentTarget).children('.expanded').each(function() { 
    $(this).slideToggle('slow', 'swing', function() { 
     $(this).toggleClass('hidden') 
    }) 
    }) 
} 

$(() => $('.expands').on('click', expandClick)) 

をしかし、私はスリムなものを使用したいと思います。推奨されているライブラリや、CSSでこれを簡単に取り除く方法はありますか？

Answer 1

私はその後、（より大きい固定高さの最大高さを変更するには、隠された部分に0に、最大の高さを設定することにより、トランジション効果を得ることができます表示noneを使用してのhttps://jsfiddle.net/vpc8khq8/2/

代わりにあなたのフィドルを更新しましたセクションはこれまでどおりになります）。また、これは親要素の上に隠されたオーバーフローを設定する必要があります：

.expands{overflow: hidden;} 

section.hidden { 
max-height: 0; 
background: red; 
} 

section{ 
    transition: 1s cubic-bezier(0.35, 1.17, 0.39, -0.61); 
    max-height: 400px; 
    background: blue; 
} 

洗練のビットとあなたはおそらくより良い何かを得ることができても、私は、バウンス効果を得るために、半まともな立方ベジエを作成しました。

chrome devtoolsを開いてトランジションアイコンをクリックすると、いくつかのプリセットから選択できます。また、カーブポイントを移動して独自のプリセットを作成することもできます。 Devtoolsはあなたに移行のプレビューを表示し、再ロードせずにテストすることができます。その後、キュービックベジエコードをCSSにコピーし直してください。

さらに一歩あなたは隠されたチェックボックスと、この例の線に沿っていくつかのCSSの策略を使用して、任意のJSせずにこのすべてを達成できるそれを取るには：[どのようにすることができますのhttps://codepen.io/mrosati84/pen/AgDry