Onclick fadeout div
Onclick fadeout div
提问于 2021-05-20 02:40:17
所以我想在点击后淡出一个div，因为我正在制作一个游戏，你必须创建一个随机的圆圈。我的代码的问题是，在它消失之后，它会重新出现！(而且，它不必在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>
，提前谢谢！
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-05-20 03:30:04
我找到了一个解决办法，进展顺利。看看这些变化。祝好运!
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>
Stack Overflow用户
发布于 2021-05-20 03:06:01
动画完成后，只需将div的div属性更改为none即可。
function fade() {
document.getElementById('circle').style.animation="fadeout 1s";
setTimeout(() => { document.getElementById('circle').style.display="none";},1000)
}Stack Overflow用户
发布于 2021-05-20 03:10:48
您可以在js中向圆圈进行转换，并将不透明度设置为0。我也会提供，您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67613241
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号