Onclick 淡出 div

Question

所以我想在 onclick 之后淡出一個 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>

提前致謝！

Answer 1

只需在 animation 完成后將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>

Onclick 淡出 div

問題描述

3 個解決方案

解決方案1
0 2021-05-20 03:06:01

解決方案2
0 2021-05-20 03:10:48

解決方案3
0 已采納 2021-05-20 03:30:04

Onclick 淡出 div

問題描述

3 個解決方案

解決方案1 0 2021-05-20 03:06:01

解決方案2 0 2021-05-20 03:10:48

解決方案3 0 已采納 2021-05-20 03:30:04

解決方案1
0 2021-05-20 03:06:01

解決方案2
0 2021-05-20 03:10:48

解決方案3
0 已采納 2021-05-20 03:30:04