2016-12-03 2 views
1
私は現在、セマンティック-UIのグリッドシステムを使用してい

にプッシュされますが、この質問はまた、他のグリッドシステムにも適用されるの円滑な移行(ブートストラップ...)私はhabeグリッドシステム - コラム/ divのは、次の行

カードが置かれる行の4つの列(angular2からのngForを持つカードの多く)。カードをクリックすると、行のサイズの半分に拡大されます(これは角度2のngClassを使用しています)

明らかに、右側のカードが次の行にプッシュされ、トランジションになります"スムーズに"。助言がありますか?

ありがとうございます!

+0

このようなことができますが、JavaScriptが必要です。クリックイベントをキャプチャし、最後に2枚のカードを検出します(2枚目のカードはプッシュされませんが、3枚目と4枚目のカードが押し出されます)。ここから、それらのオブジェクトをクローンし、それらを次の行に移動します。それらがページから始まっていることを確認してから、左から右にアニメーションしてください。あなたはカードを「半分行」に成長させるときと同じアニメーション時間を使用してください。それはかなり見えません。 – Ohgodwhy

+0

基本的に私は「スナップ」を引き起こす次の行にプッシュされるカードを検出する方法を書く必要があります。それらを手動でアニメーション化しますか? –

+0

私は確かにそれについて行くための一つの方法だと言うでしょう、はい! – Ohgodwhy

答えて

0

列に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

+0

返信ありがとうございますが、これはcolの変更だけをアニメーション化し、colが別の行にプッシュされたときには「スナップ」をアニメーション化しません。 –

関連する問題