Übergang auf flexbox anwenden justify-content-Eigenschaft

Question

Ich habe eine CSS-Klasse, die bei Hover sollte die justify-content Eigenschaft von center zu flex-start mit einer Verzögerung von 1s ändern.

So funktioniert alles gut und wird verzögert, außer von der .

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

Mache ich etwas falsch? Und wenn ja, wie kann ich dieses Verhalten erreichen?

Answer 1

Okay, so wie skreborn erwähnt, Sie kippe Verwendung Übergang auf rechtfertigen Inhalt, also versuchte ich mit Animation und es funktioniert:

.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 ist keine übergangsfähige Eigenschaft. Sie können die vollständige Liste der kompatiblen Eigenschaften here finden. Alle nicht aufgelisteten Eigenschaften sollten einfach an ihren neuen Wert angepasst werden.

Wenn Sie nur ein einzelnes Element animieren müssen, können Sie versuchen, absolute Positionierung zu verwenden.

#wrapper { 
    position: relative; 
} 

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

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

Denken Sie daran, dass dies nicht Arbeit für mehrere Elemente.