にプッシュされますが、この質問はまた、他のグリッドシステムにも適用されるの円滑な移行(ブートストラップ...)私はhabeグリッドシステム - コラム/ divのは、次の行
カードが置かれる行の4つの列(angular2からのngForを持つカードの多く)。カードをクリックすると、行のサイズの半分に拡大されます(これは角度2のngClassを使用しています)
明らかに、右側のカードが次の行にプッシュされ、トランジションになります"スムーズに"。助言がありますか?
ありがとうございます!
にプッシュされますが、この質問はまた、他のグリッドシステムにも適用されるの円滑な移行(ブートストラップ...)私はhabeグリッドシステム - コラム/ divのは、次の行
カードが置かれる行の4つの列(angular2からのngForを持つカードの多く)。カードをクリックすると、行のサイズの半分に拡大されます(これは角度2のngClassを使用しています)
明らかに、右側のカードが次の行にプッシュされ、トランジションになります"スムーズに"。助言がありますか?
ありがとうございます!
列にCSSのトランジションを追加できます。例えば:
div[class^="col-"] {
transition: width 0.3s, height 0.3s;
}
これはcol-
で始まるクラスを持つすべてのdiv要素を選択し、高さと幅のトランジションを追加します。秒単位で値を変更して、トランジションの速度を調整することができます。この例には、ベンダープレフィックスは含まれていません。トランジションの詳細はこちらhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
返信ありがとうございますが、これはcolの変更だけをアニメーション化し、colが別の行にプッシュされたときには「スナップ」をアニメーション化しません。 –
このようなことができますが、JavaScriptが必要です。クリックイベントをキャプチャし、最後に2枚のカードを検出します(2枚目のカードはプッシュされませんが、3枚目と4枚目のカードが押し出されます)。ここから、それらのオブジェクトをクローンし、それらを次の行に移動します。それらがページから始まっていることを確認してから、左から右にアニメーションしてください。あなたはカードを「半分行」に成長させるときと同じアニメーション時間を使用してください。それはかなり見えません。 – Ohgodwhy
基本的に私は「スナップ」を引き起こす次の行にプッシュされるカードを検出する方法を書く必要があります。それらを手動でアニメーション化しますか? –
私は確かにそれについて行くための一つの方法だと言うでしょう、はい! – Ohgodwhy