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

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

<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" ></i></a></li> 
  <li><a href="#"><i ></i></a></li>
  <li><a href="#"><i ></i></a></li>
</ul>

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

CodePudding user response：

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

<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" ></i></a></li> 
  <li><a href="#">not me<i ></i></a></li>
  <li><a href="#">or me<i ></i></a></li>
</ul>

CodePudding user response：

In your approach every time that you click your div you will create a new div element in the same place, which create eventually tons of same 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;
  }
}

<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" ></i></a></li> 
  <li><a href="#">not me<i ></i></a></li>
  <li><a href="#">or me<i ></i></a></li>
</ul>