web-dev-qa-db-fra.com

Application de transition sur la propriété de justification flexbox de flexbox

J'ai une classe CSS qui, en survol, devrait changer la propriété justify-content de center à flex-start avec un délai de 1s.

Donc tout fonctionne bien et est en retard sauf du justify-content.

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

Est-ce que je fais quelque chose de mal? Et si oui, comment puis-je obtenir ce comportement?

csscss3flexbox
8
Pachu

justify-content n'est pas une propriété pouvant faire l'objet d'une transition. Vous pouvez trouver la liste complète des propriétés compatibles ici . Toutes les propriétés non répertoriées doivent simplement s'aligner sur leur nouvelle valeur.

Si vous devez animer un seul élément, essayez d’utiliser le positionnement absolu.

#wrapper {
    position: relative;
}

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

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

Gardez à l'esprit que cela not fonctionnera pour plusieurs éléments.

11
skreborn

Vous ne pouvez pas animer 'justifier-contenu', mais si vous avez besoin d'animer un élément pour passer d'un côté à l'autre, vous pouvez faire:

.parent {
   display: flex;
}

.menuItem:hover {
  flex: 1;
  animation: moveAnim .3s alternate 1;
}

@keyframes moveAnim {
  from { flex: none }
  to{ flex: 1 }
}
0
GEkk