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 souhaite changer l'affichage juste après le survol, mais l'opacité doit être modifiée à l'aide de la transition.

Basé sur la réponse de Michaels, il s'agit du code CSS réel à 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;
    }
}

Vous pouvez faire avec des animations CSS:

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

Si possible, utilisez à la visibilityplace dedisplay

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

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

J'ai utilisé cela pour y parvenir. Ils s'estompent en vol stationnaire mais ne prennent pas de place lorsqu'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;
}

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.

Il existe une autre bonne méthode pour y parvenir 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, cela n'est pas pris en charge dans IE10 et les versions antérieures.

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-collé avec les préfixes "-moz" et "-o".

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

Voici à quoi ressemblerait le code d'origine en utilisant 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;
}

Si vous déclenchez le changement avec JS, disons en cliquant, il existe une belle solution de contournement.

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

L'astuce consiste à demander au navigateur de rendre l'image après avoir changé 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);

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 z-index entre -100 et 100 maintenant.

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

affichage + opacité

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

Mon désir était d'éloigner l'élément lorsqu'il n'est pas visible. Cette solution fait exactement cela: elle déplace l'élément hors de l'extérieur, 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 hacks de compatibilité descendante. Il illustre simplement le concept de la façon dont l'élément est éloigné car il n'est plus nécessaire.

La partie intéressante sont les deux définitions de transition différentes. Lorsque le pointeur de la souris survole l' .parentélément, l' .childélément 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 que le changement d'opacité soit terminé avant que l'élément puisse être déplacé hors de l'écran:

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

Éloigner l'objet sera une alternative viable dans le cas où le réglage display:nonene casserait pas la mise en page.

J'espère avoir frappé dans le mille pour cette question même si je n'y ai pas répondu.

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

Modifier: enregistrer 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>

Pour avoir une animation dans les deux sens onHoverIn / Out, j'ai fait cette solution. J'espère que cela aidera 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;
  }
}

COMMENT ANIMER L'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

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

display:n'est pas transposable. Vous devrez probablement utiliser jQuery pour faire ce que vous voulez faire.