web-dev-qa-db-ja.com

flexbox orderでトランジションを使用する

フレックスボックスアイテムの順序を変更する方法はありますか？

言い換えれば、私はこれを持つことができますか（これの詳細 フィドル ）

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

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

htmlcsscss-transitionsflexbox
23
Thorben Croisé

残念ながらいいえ：order属性はアニメート可能ですが、整数としてのみです。これは、アニメーションの各ステップ/フレームについて、最も近い整数にフローリングすることによって値を補間することを意味します。したがって、アイテムは、計算された整数値が生成されるスロットにのみ表示され、スムーズな動きの方法でその間に表示されることはありません。

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

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

18
Emil

orderプロパティを使用していないため、実際には質問に答えていません。

しかし、私はあなたが期待するのと同じようなことをしたかったので、最終的に：

  • HTMLで、要素にdata-order属性を追加します
  • 各要素の位置にCSSプロパティを追加します
  • Javascriptを使用してdata-orderを変更します
  • 補間にCSSトランジションを使用する

デモは次のとおりです。 https://codepen.io/neiya/pen/VwLqQPO

これは、スライダー（またはその他）をアニメーション化するが、アクセシビリティの目的でHTML内の要素の順序を維持したい場合に役立ちます。これは、orderプロパティの便利な使用法の1つです。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property_and_accessibility を参照してください。

4
neiya

この質問は今では古いですが、私は最近、これを使用してこれをテストしましたFiddle（Jasonがコメントで投稿したものから適応）： http://jsfiddle.net/aqrxcd1u / （以下のコード）。

ChromeとFirefoxの両方で、これは部分的にアニメーション化され、順序が遷移します現在の値から目標値まで一度に1つずつ。つまり、5-> 1からではなく、5-> 4-> 3-> 2-> 1になります。

デスクトップSafariでは、それでも直接5-> 1になります。

#container {
    display: flex;
}
#container div {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    background-color: red;    
}
#container div:nth-child(even) {
    background-color: blue;
}
}
#container div:last-child {
    order: 5;
    transition: order 1s;
}
#container:hover div:last-child {
    order: -1 !important;
}

<div id="container">
    <div style="order: 1">Element 1A</div>
    <div style="order: 2">Element 2B</div>
    <div style="order: 3">Element 3C</div>
    <div style="order: 4">Element 4D</div>
    <div style="order: 5">Element 5E</div>
</div>
2
Tom Anthony

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

  • 表示する要素をheightの1/10のラッパーに入れ、ラッパーを設定しますoverflow: visible
  • 次に、同じheightを使用してこれらのラッパーの間に9つの間隔要素を配置します。
  • それらすべてにorderとtransitionを置きます。
  • ラッパーのorderを変更し、「遷移」するのを確認します。

悲しいことに、それは醜く、Firefoxでのみ機能します。 これがAngularでテストしたものです

1
Nguyễn Đức Long