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

Question

我正在制作一个带有“like”function 的网站，如果您单击“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 文件中提取它来提供。 但是，如果您要使用 animation 属性，则需要构建某种关键帧 animation，否则什么都不会发生。 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 元素后，您可以设置一个计时器，等待 animation 发生。 然后使用myDiv.classList.remove('show');删除 class

 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>