web-dev-qa-db-fra.com

La transition CSS3 ne fonctionne pas avec la propriété display

J'ai essayé d'utiliser css pour afficher un fondu enchaîné de Div caché chaque fois que je survole son élément parent.

Jusqu'ici, tout ce que j'ai réussi à faire, c'est de montrer la div cachée, mais il n'y a aucune transition facilitée.

Voici mon code sur JSfiddle http://jsfiddle.net/9dsGP/

Voici mon code:

HTML:

<div id="header">
<div id="button">This is a Button
    <div class="content">
    This is the Hidden Div
    </div>
</div>
</div>

CSS:

#header #button {width:200px; background:#eee}

#header #button:hover > .content {display:block; opacity:1;}

#header #button .content:hover { display:block;}

#header #button .content {

-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;

    opacity:0;
    clear: both;
    display: none;

    top: -1px;
    left:-160px;
    padding: 8px;
    min-height: 150px;
    border-top: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    -webkit-border-radius: 0px 7px 7px 7px;
    -moz-border-radius: 0px 7px 7px 7px;
    -khtml-border-radius: 0px 7px 7px 7px;
    border-radius: 0px 7px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
    background: #FFF;
}

Un indice sur ce que je fais mal? J'essaie juste d'obtenir un effet lisse pour le contenu caché lorsque je survole le bouton. Merci d'avance!

htmlcsscss3css-transitions
35
JCBiggar

display:none; supprime un bloc de la page comme s'il n'y était jamais. Un bloc ne peut pas être affiché partiellement; c’est là ou non. La même chose est vraie pour visibility; vous ne pouvez pas vous attendre à un bloc de moitié hidden qui, par définition, serait visible! Heureusement, vous pouvez utiliser opacity pour atténuer les effets.
- référence

En tant que solution CSS alternative, vous pouvez utiliser les propriétés opacity, height et padding pour obtenir l'effet souhaité:

#header #button:hover > .content {
    opacity:1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

(Préfixes du fournisseur omis en raison de la brièveté.)

Voici un démo de travail. Aussi voici n sujet similaire sur SO.

#header #button {
  width:200px;
  background:#ddd;
  transition: border-radius .3s ease .15s;
}

#header #button:hover, #header #button > .content {
    border-radius: 0px 0px 7px 7px;
}

#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;    
}

#header #button > .content {
  opacity:0;
  clear: both;
  height: 0;
  padding: 0 8px;
  overflow: hidden;

  -webkit-transition: all .3s ease .15s;
  -moz-transition: all .3s ease .15s;
  -o-transition: all .3s ease .15s;
  -ms-transition: all .3s ease .15s;
  transition: all .3s ease .15s;

  border: 1px solid #ddd;

  -webkit-box-shadow: 0px 2px 2px #ddd;
  -moz-box-shadow: 0px 2px 2px #ddd;
  box-shadow: 0px 2px 2px #ddd;
  background: #FFF;
}

#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
  <div id="button"> <span>This is a Button</span>
    <div class="content">
      This is the Hidden Div
    </div>
  </div>
</div>
92
Hashem Qolami

Vous ne pouvez pas utiliser height: 0 et height: auto pour faire la transition en hauteur. auto est toujours relatif et ne peut pas être utilisé. Vous pouvez cependant utiliser max-height: 0 et que cela passe à max-height: 9999px par exemple.

Désolé, je n'ai pas pu commenter, mon représentant n'est pas assez élevé ...

13
Boomstein

J'ai trouvé une solution en bricolant.

Personnes qui veulent voir les résultats directement:

Avec un clic: https://jsfiddle.net/dt52jazg/

Avec le survol: https://jsfiddle.net/7/7/kkufLsh/1/

Ci-dessous le code:

[~ # ~] html [~ # ~] 

<ul class="list">
  <li>Hey</li>
  <li>This</li>
  <li>is</li>
  <li>just</li>
  <li>a</li>
  <li>test</li>
</ul>

<button class="click-me">
  Click me
</button>

[~ # ~] css [~ # ~] 

.list li {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.active li {
  min-height: 20px;
  opacity: 1;
}

[~ # ~] js [~ # ~] 

(function() {
  $('.click-me').on('click', function() {
    $('.list').toggleClass('active');
  });
})();

S'il vous plaît laissez-moi savoir s'il y a un problème avec cette solution 'car je pense qu'il n'y aurait aucune restriction de hauteur maximale avec cette solution.

2
rash.tay

Quelques changements ont été apportés, mais je pense que j'ai obtenu l'effet que vous souhaitiez en utilisant visibility. http://jsfiddle.net/9dsGP/49/

J'ai également apporté ces modifications:

position: absolute; /* so it doesn't expand the button background */
top: calc(1em + 8px); /* so it's under the "button" */
left:8px; /* so it's shifted by padding-left */
width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */

Alternativement, vous pouvez mettre .content comme un frère de .button, mais je n’ai pas donné d’exemple pour cela.

0
Jayen

hauteur maximum

.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}

.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}

https://www.codehive.io/boards/bUoLvRg

0
Fatih Hayrioğlu

J'ai fait face au problème avec display:none

J'ai plusieurs barres horizontales avec des effets de transition mais je voulais montrer seulement une partie de ce conteneur et plier le reste tout en maintenant les effets. J'ai reproduit une petite démo ici

Il était évident d'envelopper ces barres animées cachées dans un div, puis d'alterner la hauteur et l'opacité de cet élément

.hide{
  opacity: 0;
  height: 0;
}
.bars-wrapper.expanded > .hide{
 opacity: 1;
 height: auto;
}

L'animation fonctionne bien, mais le problème était que ces barres cachées occupaient toujours de l'espace sur ma page et chevauchaient d'autres éléments.

enter image description here

donc ajouter display:none au wrapper caché .hide résout le problème de marge mais pas la transition, ni l’application de display:none ou height:0;opacity:0 travaille sur les éléments enfants.

Ma dernière solution consistait donc à donner à ces barres cachées une position absolue et négative, ce qui a bien fonctionné avec les transitions CSS.

Jsfiddle

0
Raja Khoury