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 display
in 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 .parent
sull'elemento, l' .child
elemento 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.