Question Transitions sur l'affichage: propriété


Je suis en train de concevoir une sorte de menu 'méga dropdown' CSS - essentiellement un menu déroulant CSS-only, mais qui contient différents types de contenu.

En ce moment, il semble que les transitions CSS3 ne s'appliquent pas à la propriété 'display'c'est-à-dire que vous ne pouvez pas faire de transition display: none à display: block (ou toute combinaison).

Quelqu'un peut-il penser à un moyen pour que le menu de deuxième niveau de l'exemple ci-dessus «se fane» quand quelqu'un survole l'un des éléments de menu de niveau supérieur?

Je suis conscient que vous pouvez utiliser des transitions sur le visibility: propriété, mais je ne peux pas penser à un moyen d'utiliser efficacement.

J'ai également essayé d'utiliser la hauteur, mais cela a échoué lamentablement.

Je suis également conscient qu'il est trivial d'y parvenir en utilisant JavaScript, mais je voulais me mettre au défi d'utiliser simplement CSS et je pense que je viens un peu court.

Toutes les suggestions sont les bienvenues.


1070
2017-07-25 22:52


origine


Réponses:


Vous pouvez concaténer deux transitions ou plus, et visibility est ce qui vient à portée de main 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>

(Ne pas oublier les préfixes du vendeur à la transition propriété)

Plus de détails sont en Cet article


1023
2017-08-04 14:58



Vous devez cacher l'élément par d'autres moyens pour que cela fonctionne.

J'ai accompli l'effet en positionnant les deux <div>s absolument et en mettant le caché à opacity: 0.

Si vous même basculer le display propriété de none à block, Votre transition sur d'autres éléments ne se produira pas.

Pour contourner cela, laissez toujours l'élément être display: block, mais cachez l'élément en ajustant l'un de ces moyens:

  1. Met le height à 0.
  2. Met le opacity à 0.
  3. Positionnez l'élément en dehors du cadre d'un autre élément qui a overflow: hidden.

Il y a probablement plus de solutions, mais vous ne pouvez pas effectuer de transition si vous basculez l'élément sur display: none. Par exemple, vous pouvez essayer d'essayer quelque chose comme ceci:

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

Mais cela sera ne pas travail. D'après mon expérience, j'ai trouvé cela pour ne rien faire.

Pour cette raison, vous devrez toujours garder l'élément display: block - mais vous pouvez contourner cela en faisant quelque chose comme ça:

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

660
2017-07-26 04:20



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

Exemple de code: -   (Vous pouvez l'appliquer à votre menu en conséquence) Démo

Ajoutez le CSS suivant à votre feuille de style: -

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

Ensuite, appliquez le fadeIn animation à l'enfant sur hover parent: - (et bien sûr ensemble display: block)

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

203
2018-02-17 19:25



Je soupçonne que le raison que les transitions sont désactivées si "display" est modifié en raison de ce que l'affichage fait réellement. Cela fait ne pas changer tout ce qui pourrait être facilement animé.

"Display: none;" et "visibility: hidden;" sont deux entièrement différentes choses. Les deux ont pour effet de rendre l'élément invisible, mais avec "visibility: hidden", il est toujours rendu dans la mise en page, mais tout simplement pas visiblement alors. L'élément caché occupe toujours de l'espace, et est toujours rendu en ligne ou en tant que bloc ou block-inline ou table ou tout ce que l'élément "display" lui dit de rendre, et occupe de l'espace en conséquence. D'autres éléments font ne pas déplacer automatiquement pour occuper cet espace. L'élément caché ne rend pas ses pixels réels à la sortie.

"Display: none" d'autre part en fait empêche l'élément de rendu entièrement. Ça ne prend pas tout espace de disposition. D'autres éléments qui auraient occupé tout ou partie de l'espace occupé par cet élément s'ajustent maintenant pour occuper cet espace, comme si l'élément simplement n'existait pas du tout.

"Display" n'est pas juste un autre attribut visuel. Il établit le mode de rendu complet de l'élément, comme s'il s'agit d'un bloc, d'un bloc inline, d'un bloc inline, d'une table, d'une ligne de table, d'une cellule de table, d'un élément de liste, etc. Chacun d'entre eux a des ramifications de mise en page très différentes, et il n'y aurait aucun moyen raisonnable de les animer ou de les transiter en douceur (essayez d'imaginer une transition en douceur de "bloc" à "inline" ou vice versa, par exemple!).

C'est pourquoi les transitions sont désactivées si l'affichage change (même si le changement est à ou de "none" - "none" n'est pas simplement invisiblity, c'est son propre mode de rendu d'élément qui signifie pas de rendu du tout!),


54
2018-06-15 18:55



display n'est pas l'une des propriétés sur lesquelles la transition fonctionne.

Voir http://www.w3.org/TR/css3-transitions/#animatable-properties- pour la liste des propriétés qui peuvent avoir des transitions appliquées à eux.


41
2017-09-22 23:24



Je sais que c'est une question très ancienne, mais pour les personnes qui regardent ce sujet, vous pouvez ajouter une animation personnalisée à la propriété de bloc maintenant.

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Démo

Dans cette démo, le sous-menu change de display:none à display:block et parvient toujours à s'estomper.


28
2017-07-29 20:51



Selon W3C Working Draft 19 novembre 2013  display n'est pas un propriété animable. Heureusement, visibility est animable. Vous pouvez enchaîner sa transition avec une transition d'opacité (JSFiddle):

  • HTML:

    <a href="http://example.com" id="foo">Foo</a>
    <button id="hide-button">Hide</button>
    <button id="show-button">Show</button>
    
  • CSS:

    #foo {
        transition-property: visibility, opacity;
        transition-duration: 0s, 1s;
    }
    
    #foo.hidden {
        opacity: 0;
        visibility: hidden;
        transition-property: opacity, visibility;
        transition-duration: 1s, 0s;
        transition-delay: 0s, 1s;
    }
    
  • JavaScript pour tester:

    var foo = document.getElementById('foo');
    
    document.getElementById('hide-button').onclick = function () {
        foo.className = 'hidden';
    };
    
    document.getElementById('show-button').onclick = function () {
        foo.className = '';
    };
    

Notez que si vous faites juste le lien transparent, sans réglage visibility: hidden, alors il resterait cliquable.


17
2018-02-02 14:59



Mon astuce JavaScript est séparer le scénario entier en deux fonctions différentes!

Pour préparer les choses, une variable globale est déclarée et un gestionnaire d'événement est défini:

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

Puis, en cachant élément, j'utilise quelque chose comme ceci:

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

Pour réapparaître l'élément, je fais quelque chose comme ceci:

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

Cela fonctionne, jusqu'à présent!


12
2017-12-14 21:55