web-dev-qa-db-fra.com

Animation CSS3: affichage + opacité

J'ai un problème avec une animation CSS3.

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

Ce code ne fonctionne que si je supprime le changement de display.

Je veux changer l'affichage juste après le survol, mais l'opacité doit être modifiée en utilisant la transition.

cssanimationcss3
75
Alexis Delrieu

J'ai un peu changé mais le résultat est magnifique.

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

Merci tout le monde.

6
Alexis Delrieu

Basé sur Michaels answer, c’est le code CSS à utiliser

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}
98
Chris

Vous pouvez faire avec des animations CSS:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;
37
Michael Mullany

Si possible - utilisez visibility au lieu de display

Par exemple:

.child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}
29
tomas.satinsky

Cette solution de contournement fonctionne:

  1. définir une "image clé":

    @-webkit-keyframes fadeIn { 
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

  2. Utilisez cette "image clé" en "survol":

    div a span { 
  display: none;
}

div a:hover span {
  display: block;

  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-name: fadeIn;
  animation-duration: 1s;
}
8
Hermann Schwarz

Je l'ai utilisé pour y parvenir. Ils disparaissent peu à peu mais ne prennent pas de place quand ils sont cachés, parfait!

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover child {
    height: auto;
    opacity: 1;
    visibility: visible;
}
6
felixhirschfeld

Il existe une autre bonne méthode pour ce faire en utilisant des événements de pointeur:

.child {
    opacity: 0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

Malheureusement, ceci n'est pas supporté dans IE10 et inférieur.

5
RafaelKr

J'ai eu le même problème. J'ai essayé d'utiliser des animations au lieu de transitions - comme suggéré par @MichaelMullany et @Chris - mais cela ne fonctionnait que pour les navigateurs Webkit, même si je copiais avec les préfixes "-moz" et "-o".

J'ai pu contourner le problème en utilisant visibility au lieu de display. Cela fonctionne pour moi car mon élément enfant est position: absolute. Le flux de documents n'est donc pas affecté. Cela pourrait fonctionner pour les autres aussi.

Voici à quoi ressemblerait le code original avec ma solution:

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}
4
Dave

Si vous déclenchez le changement avec JS, disons au clic, il existe une solution de contournement de Nice. 

Vous voyez que le problème se produit car l'animation est ignorée à l'affichage: aucun élément, mais le navigateur applique toutes les modifications en même temps et l'élément n'est jamais display: block tant qu'il n'est pas animé en même temps. 

L'astuce consiste à demander au navigateur de rendre le cadre après avoir modifié la visibilité, mais avant de déclencher l'animation.

Voici un exemple JQuery:

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);
2
daniel.sedlacek

Sur les éléments absolus ou fixes, vous pouvez également utiliser z-index:

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

Les autres éléments devraient avoir un indice z compris entre -100 et 100 maintenant.

2
Luca Steeb

COMMENT ANIMER UNE OPACITÉ AVEC CSS:
voici mon code:
le code CSS

.item {   
    height:200px;
    width:200px;
    background:red;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}
<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>

ou consultez ce fichier de démonstration

fonction vote () {
var vote = getElementById ("yourOpinion")
if (this.workWithYou):
vote + = 1};
lol

1
zakizakibzr

Je sais, ce n'est pas vraiment une solution à votre question, parce que vous demandez 

affichage + opacité

Mon approche résout une question plus générale, mais c'est peut-être le problème de fond qui devrait être résolu en utilisant display en combinaison avec opacity.

Mon désir était d'éliminer l'élément quand il n'est pas visible ..__ Cette solution fait exactement cela: Elle déplace l'élément hors de distance, et cela peut être utilisé pour la transition:

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

Ce code ne contient aucun préfixe de navigateur ou piratage de compatibilité ascendante. Cela illustre simplement le principe selon lequel l'élément est éloigné car il n'est plus nécessaire.

La partie intéressante concerne les deux définitions de transition différentes. Lorsque le pointeur de la souris survole l'élément .parent, l'élément .child doit être mis en place immédiatement, puis l'opacité sera modifiée:

transition: left 0s, visibility 0s, opacity 0.8s;

Lorsqu'il n'y a pas de survol ou que le pointeur de la souris a été déplacé de l'élément, il faut attendre la fin du changement d'opacité pour que l'élément puisse être retiré de l'écran:

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

Déplacer l'objet sera une alternative viable dans le cas où définir display:none ne casse pas la mise en page.

J'espère avoir mis le doigt dessus pour cette question bien que je n'y aie pas répondu.

1
Hannes Morgenstern

Pour avoir une animation sur les deux manières onHoverIn/Out j'ai fait cette solution. J'espère que ça va aider quelqu'un

@keyframes fadeOutFromBlock {
  0% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }
}

@keyframes fadeInFromNone {
  0% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }

  1% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }
}

.drafts-content {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  animation: fadeInFromNone 1s ease-in;
  will-change: opacity, transform;

  &.hide-drafts {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
    animation: fadeOutFromBlock 0.5s ease-out;
    will-change: opacity, transform;
  }
}
0
Nicholas

Une chose que j'ai faite a été de régler la marge de l'état initial sur quelque chose comme "marge-gauche: -9999px" afin qu'elle n'apparaisse pas à l'écran, puis de réinitialiser "marge-gauche: 0" sur l'état de survol. Gardez-le "display: block" dans ce cas. L'astuce pour moi :)

Edit: Sauvegarder l'état et ne pas revenir à l'état de survol précédent? Ok ici nous avons besoin de JS:

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>
0
Joshua