CODEWITHSUNDEEP
javascripthtmlcss
user180574
user180574

Reputation: 6084

CSS: How to hide when fadeout completes?

I am using the snackbar code from here https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar, which has a timeout function to hide div when fadeout completes. It works OK, but not highly synchronized. Sometimes I see fadeout stops abruptly while in other cases it reappears after fadeout then quickly disappears.

It would be nice to synchronize fadeout with hide instead of relying on hard-coded timeout, but I don't know how to achieve that after several trials. Note, due to some technical restrictions I cannot use advanced css or html features, and no jquery.

<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=11'>
<style type='text/css'>
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin: auto;
  background-color: #c8bed9;
  color: #000000;
  text-align: center;
  transform: translateX(-50%);
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-weight: bold;
  font-family: "Arial", Times, serif;
  font-size: 20px;
}

#snackbar.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
} 
</style>
</head>
<body>
<div id="snackbar">This should show some text and some message if needed...</div>
<script>
function terminate()
{
    var elm = document.getElementById("snackbar");
    setTimeout(function() {
        elm.className = "show";
        document.getElementById("loading_wheel").style.display = "none";
    }, 200);     
    setTimeout(function() {
        elm.className = "";
    }, 3000);
    return false;
}
window.onload = terminate;
</script>
</body>
</html>

Upvotes: 0

Views: 417

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22265

you can use the end of animation detection.
Document: animationend event -> https://developer.mozilla.org/en-US/docs/Web/API/Document/animationend_event

The particularity of your code is that it is a double animation, which implies that you have to wait for the end of the second animation to remove the class "show"

sample code:

const snackbar  = document.getElementById('snackbar')
  ,   btShowMsg = document.getElementById('bt-ShowMessage')
  ;
btShowMsg.onclick = e =>
  {
  let EndTransitionNumber = 0;
  snackbar.addEventListener('animationend',AnimationEnded)

  snackbar.className = "show";

  function AnimationEnded(e)
    {
    if (++EndTransitionNumber===2)
      {
      snackbar.className = '';
      snackbar.removeEventListener('animationend', AnimationEnded)
      }
    }
  }
#snackbar {
  visibility      : hidden;
  min-width       : 250px;
  margin          : auto;
  background-color: #c8bed9;
  color           : #000000;
  text-align      : center;
  transform       : translateX(-50%);
  border-radius   : 2px;
  padding         : 16px;
  position        : fixed;
  z-index         : 1;
  left            : 50%;
  bottom          : 30px;
  font-weight     : bold;
  font-family     : "Arial", Times, serif;
  font-size       : 20px;
}
#snackbar.show {
  visibility      : visible;
  animation       : fadein 0.5s, fadeout 1.5s 2.5s;
}
@keyframes fadein {
  from { bottom: 0;    opacity: 0; }
  to   { bottom: 30px; opacity: 1; }
}
@keyframes fadeout {
  from { bottom: 30px; opacity: 1; }
  to   { bottom: 0;    opacity: 0; }
} 
  <button id="bt-ShowMessage">Show Message</button>

  <div id="snackbar">This should show some text and some message if needed...</div>

Upvotes: 0

brouxhaha
brouxhaha

Reputation: 4093

Instead of using from and to, use percentages like below:

@keyframes fadein {
    0% {bottom: 0; opacity: 0; display: none;}
    1% {bottom: 0; opacity: 0; display: block;}
    100% {bottom: 30px; opacity: 1; display: block;}
}

@keyframes fadeout {
    0% {bottom: 30px; opacity: 1; display: block;}
    99% {bottom: 0; opacity: 0; display: block;}
    100% {bottom: 0; opacity: 0; display: none;}
}

This will allow you to get around not being able to animate display while still being able to fade in and out. You may need to play around with percentages, but usually, you just want to flip the display immediately at the start or right at the end.

Upvotes: 3

Related Questions