2017-06-19 5 views
1

Ich kann den Ausblendeffekt auf das Bild machen, aber nach dem Effekt, das Bild immer noch auf dem Bildschirm angezeigt. Ich möchte es display: none; nach dem 2s Fade-Out-Effekt machen. Wie kann es gemacht werden?Javascript Fade-Out-Effekt kann das Bild nicht verschwinden lassen

document.getElementById("imgX").style.animation = "fadeout 2s";
@keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
     /* Firefox < 16 */ 
 
@-moz-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
/* Safari, Chrome and Opera > 12.1 */ 
 
@-webkit-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
/* Internet Explorer */ 
 
@-ms-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
/* Opera < 12.1 */ 
 
@-o-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
}
<img id="imgX" src="x.png" />

Antwort

3

hinzufügen forwards

document.getElementById("imgX").style.animation = "fadeout 2s forwards"; 
2

hinzufügen forwards zu Ihrer Animation Erklärung

document.getElementById("imgX").style.animation = "fadeout 2s forwards";
@keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
     /* Firefox < 16 */ 
 
@-moz-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
/* Safari, Chrome and Opera > 12.1 */ 
 
@-webkit-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
/* Internet Explorer */ 
 
@-ms-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
/* Opera < 12.1 */ 
 
@-o-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
}
<img id="imgX" src="x.png" />

Verwandte Themen