如何使Javascript中創建的div淡入淡出？

我正在制作一個具有“點贊”功能的網站，如果您單擊點贊圖示，它應該使 div 作為網站底部的警報。我撰寫的代碼使 div 淡入，幾秒鐘后彈出淡出。然后在淡出之后，彈出視窗再次出現在螢屏上，但這次卡住了。我正在學習 Javascript，所以它對我來說是新的，所以任何事情都會受到贊賞。

function myFunction() {
  var test = document.querySelector('#color');
  var x = document.createElement('div');
  if(test.style.color == ""){
    test.style.color = "red";
    x.innerHTML ='Liked this tournament!';
    x.id = "snackbar";
    x.className = "show";
    
  } else{
    test.style.color = "";
    x.innerHTML('Removed like from this tournament!');
    x.id = "snackbar";
    x.className = "show";
    
  }
  document.body.appendChild(x);
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 10%;
  bottom: 30px;
  font-size: 17px;
}
  
#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<ul>
  <li onclick="myFunction();"><a href="#/"><i id="color" class="fas fa-heart"></i></a></li> 
  <li><a href="#"><i class="fas fa-plus"></i></a></li>
  <li><a href="#"><i class="fas fa-expand"></i></a></li>
</ul>

我認為這可能是因為document.body.appendChild(x);覆寫了css？我不確定發生了什么。關于彈出視窗的簡短視頻：https ://imgur.com/a/KfD7hNW

uj5u.com熱心網友回復：

我不確定您是否忘記復制 CSS 的一部分，但您似乎沒有任何實際影片。如果您想要這些效果，您可以使用https://animate.style/提供的 CSS，方法是匯入它或從他們的 GitHub 檔案中提取它（如果您只想要兩個影片）。但是，如果您要使用影片屬性，則需要構建某種關鍵幀影片，否則不會發生任何事情。該forwards值允許影片播放，然后不重復它們，因此在用戶單擊按鈕后它不會閃爍。

此外，您有一些損壞的 JS，但這是一個簡單的錯誤。

值得一讀：https ://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations ，這樣你就可以看到所有屬性是如何被影片和控制的

function myFunction() {
  var test = document.querySelector('#color');
  var x = document.createElement('div');
  if(test.style.color == ""){
    test.style.color = "red";
    x.innerHTML ='Liked this tournament!';
    x.id = "snackbar";
    x.className = "show";
    
  } else{
    test.style.color = "";
    x.innerHTML='Removed like from this tournament!'
    x.id = "snackbar";
    x.className = "show";
    
  }
  document.body.appendChild(x);
  
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 10%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  animation: fadeIn 0.5s, fadeOut 0.5s 2.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}

.fadeIn {
  animation-name: fadeIn;
}

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<ul>
  <li onclick="myFunction();"><a href="#/">click me<i id="color" class="fas fa-heart"></i></a></li> 
  <li><a href="#">not me<i class="fas fa-plus"></i></a></li>
  <li><a href="#">or me<i class="fas fa-expand"></i></a></li>
</ul>

標籤：javascript html css 警报

上一篇：從Java中父類的靜態方法獲取子類

下一篇：使用物件解構時檢查物件變數是否存在