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.