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

Question

I'm making a website with a 'like' function and if you click the like icon it should make div as a alert at the bottom of the website. The code that I wrote makes the div fade in and after a few seconds the pop up fades out. Then after the fade out the pop up just shows up again on the screen, but stuck this time. I'm learning Javascript so it is new to me so anything would be appreciated.

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;
}

I think it's maybe because of the document.body.appendChild(x); overwriting the css? I'm not sure what's happening.. A short video about the pop up: https://imgur.com/a/KfD7hNW

user_8565010 · Answer

I'm not sure if you forgot to copy a portion of your CSS but you don't seem to have any actual animations. If you want those effects you can use the CSS that https://animate.style/ provides either by importing it or extracting it from their GitHub files if you just want the two animations. But if you're going to use the animation attribute, you need some kind of keyframe animation built out otherwise nothing is going to happen. The forwards value lets the animations play and then doesn't repeat them so it's not flashing after the user clicks the button.

Also, you had some broken JS but that was a simple mistake.

Worth reading: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations so you can see how all of the attributes can be animated and controlled

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;
}



  click me 
  not me
  or me

user_17755777 · Answer

In your approach every time that you click your icon you will create a new div element in the same place, which will create tons of div.. This is not efficient. So you can try something like this.

After adding show class to your div element you can set a timer which will wait for animation happens. Then remove that class with 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;
  }
}



  click me 
  not me
  or me

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

2 Answers