フレックスボックスのトランジションの適用justify-contentプロパティ

Question

私は、ホバーでjustify-contentプロパティをcenterからflex-startに1秒遅らせて変更する必要があるCSSクラスを持っています。

したがって、すべて正常に動作し、justify-content以外は遅延しています。

.menuItem:hover { 
    transition-property: all; 
    transition-delay: 1s; 
    justify-content: flex-start; 
} 

私は何か間違っていますか？もしそうなら、どうすればその行動を達成できますか？

Answer 1

さて、skrebornが述べたように、あなたは正当化、コンテンツの移行を使用傾けるので、私はアニメーションでみましたし、それが動作します：

.menuItem:hover { 
    animation-name: change-content; 
    animation-delay: 1s; 
    animation-fill-mode: forwards; 
} 

@keyframes change-content { 
    from { justify-content: center; } 
    to { justify-content: flex-start; } 
} 

Answer 2

justify-contentは、遷移可能なプロパティではありません。互換性のあるプロパティの完全なリストhereを見つけることができます。リストされていないプロパティは、すべて新しい値にスナップするだけです。

単一の要素のみをアニメーション化する必要がある場合は、絶対配置を試みることができます。

#wrapper { 
    position: relative; 
} 

#element { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    transition: all 300ms; 
} 

#element:hover { 
    left: 0; 
    transform: translateX(0); 
} 

これは、複数の要素のためのない動作することに注意してください。