Onclick fadeout div
Question
So I wanted to fade out a div after onclick, as I am making a game where you have to create random circles. The problem with my code is that after it fades out it reappears, (Also: It doesn't have to fade out just disappear after onclick) Here is my code:
function fade() { document.getElementById('circle').style.animation="fadeout 1s" }
@keyframes fadeout { 1% { opacity: 100; } 99% { opacity: 0; } 100% { visibility: none; } }.fadeout { animation: fadeout 1s }.circle { height: 25px; width: 25px; background-color: black; border-radius: 50%; display: inline-block; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Aim</title> <div onclick="fade()" id="circle" class="circle"></div> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <script src="script.js"></script> </body> </html>
Thanks in advance!
3 answers
solution1
0 2021-05-20 03:06:01
Just change the display property of div to none after the animation is Completed.
function fade() {
document.getElementById('circle').style.animation="fadeout 1s";
setTimeout(() => { document.getElementById('circle').style.display="none";},1000)
}
solution2
0 2021-05-20 03:10:48
You can give a transition to the circle and set the opacity to 0 in js. I would also offer that you can use mouseclick to make its opacity 1 again and reappear wherever you click at.
function fade() { document.getElementById('circle').style.opacity="0" }
.circle { height: 25px; width: 25px; background-color: black; border-radius: 50%; display: inline-block; transition: opacity 2s; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Aim</title> <div onclick="fade()" id="circle" class="circle"></div> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <script src="script.js"></script> </body> </html>
solution3
0 ACCPTED 2021-05-20 03:30:04
I have found out a solution and goes well. Look at the changes. Good Luck!
function fade() { document.getElementById('circle').style.animation="fadeout 1s forwards" //change this part }
@keyframes fadeout { 1% { opacity: 100; } 99% { opacity: 0; } 100% { visibility: hidden; //change this part } }.fadeout { animation: fadeout 1s }.circle { height: 25px; width: 25px; background-color: black; border-radius: 50%; display: inline-block; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Aim</title> <div onclick="fade()" id="circle" class="circle"></div> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <script src="script.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.