33

フレックスボックス項目の順序を遷移させる方法はありますか?

言い換えれば、これをもらえますか (このフィドルの詳細)

#container {
    display: flex;
}
#container:hover div:last-child {
    order: -1;
}

アニメーション（新しい位置を取得する要素は、時間の経過とともにその位置を想定します）、お願いします

4

4 に答える 4

22

残念ながら違います: order 属性はアニメート可能ですが、整数としてのみです。つまり、アニメーションの各ステップ/フレームに対して、最も近い整数にフロアリングして値を補間します。したがって、アイテムは、計算された整数値が結果として得られるスロットにのみ表示され、滑らかな動きの方法では決して表示されません。

技術的にはまだアニメーションです。計算された整数位置は、アニメーションのタイミング関数とキーフレーム ルールに従う必要があります。アイテムが変化すると、位置から位置へと「ジャンプ」するだけです。

https://developer.mozilla.org/en-US/docs/Web/CSS/integer#Interpolationを参照してください

于 2014-08-31T15:39:53.837 に答える
2

Emil が述べたように、整数としてのみアニメーション化します。ただし、ハックを考えています：

  • 表示したい要素を の 1/10 のラッパーに入れ、ラッパーをheight設定します。overflow: visible
  • 次に、これらのラッパーの間に同じheight.
  • orderそれらすべてを置いてくださいtransition。
  • orderラッパーを変更し、「遷移」を監視します。

悲しいことに、それは見苦しく、Firefox でしか動作しません。 これがAngularでテストしたものです

于 2016-01-05T11:25:08.110 に答える