如何让在Javascript中创建的div淡入淡出？

Question

我正在制作一个具有 'like' 功能的网站，如果您单击“赞”图标，它应该会在网站底部显示 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

Answer 1

我不确定您是否忘记复制您的 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>

Answer 2

在您的方法中，每次单击您的图标时，您都会在同一位置创建一个新的 div 元素，这将创建大量的 div.. 这效率不高。所以你可以尝试这样的事情。

将 show class 添加到 div 元素后，您可以设置一个计时器，等待动画发生。然后删除 class 与 myDiv.classList.remove('show');

const test = document.querySelector('#color');
const myDiv = document.createElement('div');
myDiv.id = "snackbar";
document.body.appendChild(myDiv);

test.addEventListener('click',() =>{

    if(test.style.color == ""){
        test.style.color = "red";
        myDiv.innerText ='Liked this tournament!';
        myDiv.className = "show";
        setTimeout(() =>{
            myDiv.classList.remove('show');
        }, 2000);
        
    }
    else{
        test.style.color = "";
        myDiv.innerText = 'Removed like from this tournament!';
        myDiv.className = "show";
        setTimeout(() =>{
            myDiv.classList.remove('show');
        }, 2000);
      }
})

*,
*::before,
*::after {
  box-sizing: border-box;
}



body{
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin:0;
  background-color: bisque;
  font-size: 100px;
}


#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 1s forwards;
}

@keyframes fadeIn {
  0%{
    opacity:0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes fadeOut {
  0%{
    opacity:1;
  }
  100%{
    opacity: 0;
  }
}

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<ul>
  <li><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中创建的div淡入淡出？

How to make a created div in Javascript fade in and fade out?

html

javascript

css

alert