Onclick 淡出 div
[英]Onclick fadeout div
问题描述
So I wanted to fade out a div after onclick, as I am making a game where you have to create random circles.
所以我想在 onclick 之后淡出一个 div，因为我正在制作一个你必须创建随机圆圈的游戏。 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:我的代码的问题是它在淡出后重新出现，（另外：它不必淡出，只需在 onclick 后消失）这是我的代码：
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 个解决方案
解决方案1
0 2021-05-20 03:06:01
Just change the display property of div to none after the animation is Completed.只需在 animation 完成后将div的display属性更改为none 。
function fade() {
document.getElementById('circle').style.animation="fadeout 1s";
setTimeout(() => { document.getElementById('circle').style.display="none";},1000)
}
解决方案2
0 2021-05-20 03:10:48
You can give a transition to the circle and set the opacity to 0 in js.你可以给圆一个过渡，并在js中将不透明度设置为0。 I would also offer that you can use mouseclick to make its opacity 1 again and reappear wherever you click at.我还建议您可以使用 mouseclick 再次使其不透明度为 1 并在您单击的任何位置重新出现。
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>
解决方案3
0 已采纳 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.