Animazione CSS3: display + opacità

Ho un problema con un'animazione 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;
}

Questo codice funziona solo se rimuovo la modifica di display.

Voglio cambiare la visualizzazione subito dopo il passaggio del mouse, ma l'opacità dovrebbe essere modificata usando la transizione.

Sulla base della risposta di Michaels, questo è il codice CSS effettivo da utilizzare

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

Puoi fare con le animazioni CSS:

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

Se possibile, usa visibilityinvece didisplay

Per esempio:

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

Questa soluzione alternativa funziona:

1. definire un "fotogramma chiave":

   @-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. Utilizza questo "fotogramma chiave" su "hover":

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

Ho usato questo per ottenerlo. Sbiadiscono al passaggio del mouse ma non prendono spazio quando sono nascosti, perfetto!

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

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

Sono cambiato un po 'ma il risultato è bellissimo.

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

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

Grazie a tutti

C'è un altro buon metodo per ottenere questo risultato usando pointer-events:

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

Sfortunatamente, questo non è supportato in IE10 e versioni precedenti.

Ho avuto lo stesso problema. Ho provato a usare le animazioni invece delle transizioni - come suggerito da @MichaelMullany e @Chris - ma ha funzionato solo per i browser webkit anche se ho copiato-incollato con i prefissi "-moz" e "-o".

Sono stato in grado di aggirare il problema usando visibilityinvece di display. Questo funziona per me perché il mio elemento figlio lo è position: absolute, quindi il flusso di documenti non viene influenzato. Potrebbe funzionare anche per gli altri.

Questo è l'aspetto del codice originale usando la mia soluzione:

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

Se stai attivando la modifica con JS, diciamo al clic, c'è una bella soluzione alternativa.

Vedete che il problema si verifica perché l'animazione viene ignorata sul display: nessun elemento tranne il browser applica tutte le modifiche contemporaneamente e l'elemento non viene mai visualizzato: blocca mentre non è animato allo stesso tempo.

Il trucco è chiedere al browser di eseguire il rendering del frame dopo aver modificato la visibilità ma prima di attivare l'animazione.

Ecco un esempio di 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);

Su elementi assoluti o fissi potresti anche usare z-index:

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

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

Altri elementi dovrebbero avere uno z-index compreso tra -100 e 100 ora.

Lo so, questa non è davvero una soluzione per la tua domanda, perché chiedi

display + opacità

Il mio approccio risolve una domanda più generale, ma forse questo era il problema di fondo che dovrebbe essere risolto utilizzando displayin combinazione conopacity .

Il mio desiderio era di togliere di mezzo l'Elemento quando non è visibile. Questa soluzione fa esattamente questo: sposta l'elemento fuori dall'esterno e questo può essere utilizzato per la transizione:

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

Questo codice non contiene prefissi del browser o hack di compatibilità con le versioni precedenti. Illustra semplicemente il concetto di come l'elemento viene spostato poiché non è più necessario.

La parte interessante sono le due diverse definizioni di transizione. Quando il puntatore del mouse si trova .parentsull'elemento, l' .childelemento deve essere posizionato immediatamente e quindi l'opacità verrà modificata:

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

Quando non c'è passaggio del mouse o il puntatore del mouse è stato spostato fuori dall'elemento, è necessario attendere fino al termine della modifica dell'opacità prima che l'elemento possa essere spostato fuori dallo schermo:

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

Spostare l'oggetto lontano sarà una valida alternativa in un caso in cui l'impostazione display:none non rompa il layout.

Spero di aver colto nel segno per questa domanda anche se non ho risposto.

Una cosa che ho fatto è stata impostare il margine dello stato iniziale in modo che fosse qualcosa come "margin-left: -9999px" in modo che non appaia sullo schermo, quindi reimpostare "margin-left: 0" nello stato hover. Tienilo "display: block" in quel caso. Ha fatto il trucco per me :)

Modifica: salvare lo stato e non ripristinare lo stato precedente al passaggio del mouse? Ok, qui abbiamo bisogno di 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>

Per avere l'animazione in entrambe le direzioni su HoverIn / Out ho fatto questa soluzione. Spero che possa aiutare qualcuno

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

COME ANIMARE L'OPACITÀ CON I CSS:
questo è il mio codice:
il codice 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>

o controlla questo file demo

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

display:non è modificabile. Probabilmente dovrai usare jQuery per fare quello che vuoi fare.