CSS transition ease-out funktioniert nicht

Ok, so verstehe ich nicht, warum das nicht Leichtigkeit aus, nur in der: (für die quick-Ansicht, fügen Sie es in http://htmledit.squarefree.com, zum Beispiel)

<style>
#over {
background: url(http://th01.deviantart.net/fs71/150/f/2013/005/0/6/dal_shabet__have__don_t_have_by_awesmatasticaly_cool-d5qkzu8.jpg);
height:150px;
width:150px;
}

#in {
background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
height:150px;
width:150px;
}

#in:hover {
opacity: 0;
transition: opacity .3s ease-in-out;
}

</style>

<div id="over">
<div id="in"></div
</div>
InformationsquelleAutor Elixan | 2013-01-23
  1. 21

    Ich bin mir nicht sicher was genau du fragst, aber ich denke, Sie werden sagen, dass der übergang nur Auftritt, auf eine Maus-über, und nicht, wenn Sie mit der Maus aus (nur es reißt zurück zu der Art, wie es vorher war, anstatt für den übergang). Sie benötigen, um Ihre transition-Eigenschaft zu #in eher als #in:hover. Der übergang wird nur auftreten, wenn Sie Ihre #in element wird mit der Maus auf. Bewegen Sie die css-Datei für den übergang unter #in und es funktioniert bei mouse over und mouse out. Sie möchten hinterlassen Sie Ihre gewünschten css für den hover-Zustand unter #in:hover, in diesem Fall, die Deckkraft zu ändern, aber der eigentliche übergang css-Eigenschaft gehen unter #in.

    Machen es ein wenig mehr klar:

    #in {
    background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
    height:150px;
    width:150px;
    transition: opacity .3s ease-in-out; /* add this here */
}

#in:hover {
    opacity:0;
    /* and we've removed it from here */
}

    Der Sache zu wissen ist, dass ease-in-out hat nichts damit zu tun, wenn es übergang. Es mag scheinen, dass die Art und Weise, diese Leichtigkeit-in ist auf zu schweben, und ease-out ist auf mouseout, aber wirklich, ease-in-out bedeutet, dass es wohl in und langsam aus, anstatt etwas wie " ease-in, die, vereinfacht, in den übergang langsam und dann beschleunigt in Richtung Ende. Es bezieht sich auf den Stil des übergangs selbst, sondern, wenn Sie auftreten.

    Vielleicht haben Sie schon verstanden, dass die, sondern auf der Grundlage Ihrer Frage, es scheint, Sie waren verwirrt es.

    • Nur zur Klarstellung für andere, verlassen Sie die opacity: 0; im #in:hover und bewegen Sie den übergang auf die #in.
    • Richtig. Ich aktualisiert meine Antwort.
    • schön, fand diese in 15 Sekunden durch google und problem gelöst nach 25 Sek.
    • De Los Santos Froh, es zu hören!
    InformationsquelleAutor welbornio
  2. 1

    Fand ich @welbornio 's Antwort für mich gearbeitet, jedoch ease-in-out nicht funktionierte perfekt auf den ersten. Bei Anwendung auf den 'img' die Leichtigkeit Effekt funktionierte nur zeitweise. Ich fand, dass damit der Effekt funktioniert immer, ich hatte auf anwenden, um die Leichtigkeit-in der 'img' und die Leichtigkeit-out, um den 'hover'. Ich bin mir nicht sicher, warum dies geschieht, aber das ist eine Lösung, wenn jemand läuft in das gleiche Problem.

    InformationsquelleAutor William Perkins
Schreibe einen Kommentar