froggy - propiedad order css

Aplicación de la transición en la propiedad justify-content de flexbox

Question

Tengo una clase de CSS que al pasar el mouse sobre el mouse debe cambiar la propiedad justify-content del center al flex-start con un retraso de 1s.

Entonces, todo funciona bien y se retrasa, excepto desde el justify-content .

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

¿Estoy haciendo algo mal? Y si es así, ¿cómo puedo lograr ese comportamiento?

Answer 1

De acuerdo, como mencionó Skreborn, no puedes usar la transición en justify-content, así que probé con animación y funciona:

.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 no es una propiedad de transición. Puede encontrar la lista completa de propiedades compatibles aquí . Todas las propiedades no listadas simplemente deben ajustarse a su nuevo valor.

Si necesita animar un solo elemento, puede intentar usar el posicionamiento absoluto.

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

Tenga en cuenta que esto no funcionará para múltiples elementos.