html - effet - faire glisser image css




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

Cette question a déjà une réponse ici:

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

Jusqu'à présent, tout ce que j'ai réussi à faire, c'est de faire apparaître la div cachée, mais il n'y a pas de transition facile.

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;
}

Quel indice sur ce que je fais mal? Juste essayer d'obtenir un effet lisse pour le contenu caché lorsque je survole le bouton. Merci d'avance!


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

En tant que solution CSS alternative, vous pouvez jouer avec les propriétés d' opacity , de height et de 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 de fournisseur omis pour cause de concision.)

Voici une démo de travail . Aussi, voici un 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>


Faites quelques changements, mais je pense que j'ai obtenu l'effet que vous voulez en utilisant la visibility . http://jsfiddle.net/9dsGP/49/

J'ai aussi fait ces changements:

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 fait d'exemple pour cela.


J'ai rencontré le problème avec l' 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 here

L’évidence était d’envelopper ces barres animées cachées dans un div puis de basculer 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 consommaient toujours de l'espace sur ma page et recouvraient d'autres éléments.

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

Donc, ma solution finale consistait à donner à ces barres cachées une position négative et absolue et cela a bien fonctionné avec les transitions CSS.

here


Lorsque vous devez basculer un élément et que vous n'avez pas besoin d'animer la propriété margin. Vous pouvez essayer margin-top: -999999em . Ne faites tout simplement pas la transition.


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







css-transitions