Estoy creando un sitio web con una función 'me gusta' y si hace clic en el icono Me gusta, debería aparecer div como una alerta en la parte inferior del sitio web. El código que escribí hace que el div se desvanezca y, después de unos segundos, la ventana emergente se desvanece. Luego, después del desvanecimiento, la ventana emergente vuelve a aparecer en la pantalla, pero esta vez se atascó. Estoy aprendiendo Javascript, por lo que es nuevo para mí, por lo que agradecería cualquier cosa.
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> Creo que tal vez se deba a document.body.appendChild(x); sobrescribiendo el css? No estoy seguro de lo que está pasando... Un breve video sobre la ventana emergente: https://imgur.com/a/KfD7hNW
No estoy seguro de si olvidaste copiar una parte de tu CSS, pero parece que no tienes animaciones reales. Si desea esos efectos, puede usar el CSS que proporciona https://animate.style/ importándolo o extrayéndolo de sus archivos de GitHub si solo desea las dos animaciones. Pero si va a utilizar el atributo de animación, necesita algún tipo de animación de fotograma clave construida, de lo contrario, no sucederá nada. El valor de forwards permite que las animaciones se reproduzcan y luego no las repite, por lo que no parpadea después de que el usuario hace clic en el botón.
Además, tenía algunos JS rotos, pero eso fue un simple error.
Vale la pena leer: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations para que pueda ver cómo se pueden animar y controlar todos los atributos
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>En su enfoque, cada vez que haga clic en su ícono, creará un nuevo elemento div en el mismo lugar, lo que creará toneladas de div. Esto no es eficiente. Así que puedes probar algo como esto.
Después de agregar show class a su elemento div, puede configurar un temporizador que esperará a que ocurra la animación. Luego elimine esa clase con 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>