我可以對圖像進行淡出效果，但是，效果之後，圖像仍然顯示在屏幕上。 2s淡出效果後我想使它display: none;。如何做呢？Javascript淡出效果不能使圖像消失

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" />

來源

2017-06-19 androidnewbie

添加forwards

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

來源

2017-06-19 07:03:07 clarkoy

添加`forwards`到您的動畫聲明

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" />

來源

2017-06-19 07:04:19

Javascript淡出效果不能使圖像消失

回答

添加forwards到您的動畫聲明

相關問題

添加`forwards`到您的動畫聲明