Transitions sur l'affichage: propriété

Question

Transitions sur l'affichage: propriété

je suis actuellement en train de concevoir une sorte de menu 'mega dropdown' CSS - essentiellement un menu de dropdown CSS-seulement normal, mais un qui contient différents types de contenu.

pour le moment, il semble que les Transitions CSS3 ne s'appliquent pas à la propriété" display , c'est-à-dire que vous ne pouvez pas faire n'importe quelle sorte de transition de display: none à display: block (ou n'importe quelle combinaison).

Peut-on penser à un moyen pour le deuxième niveau menu de la exemple ci-dessus pour "se fondre dans" quand quelqu'un plane au-dessus d'un des éléments de menu de haut niveau?

je suis conscient que vous pouvez utiliser des transitions sur la propriété visibility: , mais je ne vois pas comment l'utiliser efficacement.

j'ai aussi essayé d'utiliser la hauteur, mais ça a échoué lamentablement.

je suis également conscient qu'il est trivial de réaliser cela en utilisant JavaScript, mais je voulais me mettre au défi d'utiliser juste CSS et je pense que je suis à venir peu court.

toutes les suggestions sont les bienvenues.

1108

css css-transitions css3

demandé sur Brian Burns 0000-00-00 00:00:00

3 réponses

score 1058 · Answer 1

vous pouvez concaténer deux transitions ou plus, et visibility est ce qui est pratique cette fois.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(n'oubliez pas les préfixes vendeur de la propriété transition )

plus de détails sont dans cet article

score 678 · Answer 2

Vous avez besoin de cacher l'élément par d'autres moyens, afin d'obtenir que cela fonctionne.

j'ai réalisé l'effet en positionnant absolument les deux <div> et en plaçant le caché à opacity: 0 .

si vous basculez même la propriété display de none à block , votre transition sur d'autres éléments ne se produira pas.

pour travailler autour de cela, toujours permettre le l'élément display: block , mais de cacher l'élément en ajustant l'un de ces moyens:

fixe le height à 0 .
définit le opacity à 0 .
Positionner l'élément à l'extérieur du cadre d'un autre élément qui a overflow: hidden .

il y a probablement plus de solutions, mais vous ne pouvez pas effectuer une transition si vous basculer l'élément à display: none . Par exemple, vous pouvez essayer quelque chose comme ceci:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

mais que ne fonctionnera pas . De mon expérience, j'ai trouvé ceci pour ne rien faire.

pour cette raison, vous aurez toujours besoin de garder l'élément display: block - mais vous pourriez l'contourner en faisant quelque chose comme ceci:

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

score 208 · Answer 3

au moment de ce post tous les principaux navigateurs désactivent les transitions CSS si vous essayez de changer la propriété display , mais les animations CSS fonctionnent toujours très bien, donc nous pouvons les utiliser comme une solution de rechange.

exemple de Code: - (vous pouvez l'appliquer à votre menu en conséquence) Demo

ajouter les CSS suivants à votre feuille de style: -

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

puis appliquer le fadeIn animation pour l'enfant sur parent hover: - (et bien sûr mis display: block )

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

Las etiquetas más populares

Transitions sur l'affichage: propriété

3 réponses