CODEWITHSUNDEEP
htmlcsscss-transitions
Robert Sinclair
Robert Sinclair

Reputation: 5426

Make notification bar slide up from the bottom

I have a small horizontal notification bar that slides up from the bottom of the page.

It comes up fine, but when you open up the page it quickly flashes, then disappears and then slides up.

How do I modify it so it doesn't appear/disappear before the transition takes place?

#notificationBarBottom {
  position: fixed;
  z-index: 101;
  bottom: 0;
  left: 0;
  right: 0;
  background: #5cb85c;
  color: #ffffff;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  -moz-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black;
}
@-webkit-keyframes slideDown {
  0%, 100% {
    -webkit-transform: translateY(0px);
  }
  10%,
  90% {
    -webkit-transform: translateY(510px);
  }
}
@-moz-keyframes slideDown {
  0%, 100% {
    -moz-transform: translateY(0px);
  }
  10%,
  90% {
    -moz-transform: translateY(510px);
  }
}
.cssanimations.csstransforms #notificationBarBottom {
  -webkit-transform: translateY(510px);
  -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
  -moz-transform: translateY(510px);
  -moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
}
<div id="notificationBarBottom">Hello, human!</div>

Jsfiddle demo here: https://jsfiddle.net/cnfk36jd/ (but unfortunately the problem is not visible there). Here's the page where you can see the "flickering" http://www.whycall.me/bannerTest.html

I tried the advice here: https://css-tricks.com/pop-from-top-notification/ and tweaked the translateY values quite a bit, but it doesn't help, not sure what else to do.

Thank you for your help

Upvotes: 0

Views: 3582

Answers (2)

Asons
Asons

Reputation: 87221

The elements initial position is visible, and then, during page load, the first translate kicks in to hide it, hence it flickers.

Do like this, push it out of view using transform: translateY(calc(100% + 10px)); and then slide it up with transform: translateY(0));.

I used 100% instead of -510px to make it height independent, and added 10px to make up for the top shadow.

I also temporary removed the prefixed properties, so you need to add them back

Updated 2021: Updated answer, improved the code suggestion, and, based on a comment, added how to make it hide using a click

document.getElementById('notificationBarBottom').addEventListener('click', function() {
   this.classList.add('hideMe');
})
#notificationBarBottom {
    position: fixed;
    z-index: 101;
    bottom: 0;
    transform: translateY(calc(100% + 10px));
    left: 0;
    right: 0;
    background: #5cb85c;
    color: #ffffff;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    box-shadow: 0 0 5px black;
}
@keyframes slideUp {
    0% { transform: translateY(100% + 10px); }
    100% { transform: translateY(0); }
}
#notificationBarBottom {
    animation: slideUp 2.5s ease forwards;
}
#close {
  display: none;
}

/* added to show how to hide with a click */
@keyframes slideDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(100% + 10px); }
}
#notificationBarBottom.hideMe {
    animation: slideDown 2.5s ease forwards;
}
<div id="notificationBarBottom">Hello, human!</div>

Upvotes: 3

Elvis
Elvis

Reputation: 1143

I think this is happening because the css file in which you've written this code is called a bit too late.

In your html page, try calling this css file earlier than other css or JS files

Upvotes: 0

Related Questions