单击淡出 div

Question

所以我想在点击后淡出一个 div，因为我正在制作一个必须创建随机圆圈的游戏。我的代码的问题是它淡出后又重新出现！（此外，它不必淡出，只需在点击后消失）这是我的代码：

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>

提前致谢！

Answer 1

动画完成后div的display属性改为none即可

    function fade() {
    document.getElementById('circle').style.animation="fadeout 1s";
    setTimeout(() => {    document.getElementById('circle').style.display="none";},1000)
    }

Answer 2

你可以在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>

Answer 3

我已经找到了解决方案并且进展顺利。看看变化。祝你好运！

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>

单击淡出 div

Onclick fadeout div

html

javascript

css

onclick