2016-06-22 56 views
0

子供(緑色)が親(赤色)より広いように折りたたみパネルを設計しました。子には枠線があり、:: beforeと:: afterで追加されたアイコンがあるため、パネル全体が折り畳まれると、子の境界線は親のアニメーションが完成するまで大きく留まります。親のオーバーフローがhiddenに設定されている場合、子要素の幅を変更します。

私は親のオーバーフローを隠してしまった場合、画面上に留まることを避けることができます。残念なことに、このクリップは子どもたちのスタイリングを行い、意図したとおりに要素を見ることはできません。

親をオーバーフローで非表示にしておき、子が親の幅を超える幅を持つようにする方法はありますか?任意のトリックですか?

container with overflow set to hidden

+1

しかし、それは 'overflow:hidden'が(親を超えた場合は子どもをクリップする)ものなので、実際に何を達成したいのですか? – LGSon

+0

jsfiddleを作成できますか? – Ricky

+0

あなたのhtml/CSSを提供すると助けがはるかに簡単になるでしょう – LGSon

答えて

1

あなたが水平に崩壊しているように見えますし、問題は、要素の幅が新しい値への移行を停止するまで、新たな幅に調整しておくことです。

これが正しい場合は、にパネルを折りたたむには、widthを使用するように変更する必要があります。子要素の再レンダリングと、幅がゼロの後に表示される要素を処理する必要があります。

+0

Nikhilはあなたがお金に恵まれたことをありがとう、親のアニメーションが完了するまで子供のスタイルが見えないようにするために、私は親のトランジションの代わりにトランスフォームを使う必要があります。素晴らしいチップ。ありがとう! –

関連する問題