Setting element to visible does not run css animation-CodePudding

I have the following html code

var feedback = document.getElementById('openNotification');
feedback.addEventListener('click', function (){

        a = document.getElementById("notification");
        a.style.visibility = "visible";
});

#notification {
  position: fixed;
  z-index: 101;
  bottom: 0;
  transform: translateY(calc(100%   10px));
  left: 10vw;
  right: 10vw;
  text-align: center;
  height: 20vh;
  overflow: hidden;
  background-color: #ededed;
  color: #000;



}
@keyframes slideUp {
    0% { transform: translateY(calc(100%   10px)); }
    100% { transform: translateY(0); }
}
#notification {
    animation: slideUp 2.5s ease forwards;
}

<button id="openNotification">
Open notification
</button>


<!--If I remove the (style="visibility: hidden;") the animation works as expected-->
<div id="notification" style="visibility: hidden;">
121
</div>

The CSS for this div contains "transform" code to make the notification slide up the screen...

When I run the following code in a setTimeout function the notification simply appears on the screen and does not slide up as it should.

        a = document.getElementById("notification");
        a.style.visibility = "visible";

How do I fix this?

On further testing I can see that the animation code seems to be running from the moment the code is loaded. I assume I need to somehow change this behaviour so the animation code is kicked off by the setTimout function or in this case the button click. Any examples on how to do this?

CodePudding user response：

The animation takes place but as it only lasts a short time, by the time you come to push the button it has finished, and you then make the thing visible.

Instead we remove the animation from the initial state of the element and add it (by adding a class in this case) only when you click the button.

Note: if you want this to be repeatable you will have to include sensing the animationend event and removing the slide class at that point. Otherwise the system will think it's done the animation and needn't do it again.

var feedback = document.getElementById('openNotification');
feedback.addEventListener('click', function (){

        a = document.getElementById("notification");
        a.style.visibility = "visible";
        a.classList.add('slide');
});

#notification {
  position: fixed;
  z-index: 101;
  bottom: 0;
  transform: translateY(calc(100%   10px));
  left: 10vw;
  right: 10vw;
  text-align: center;
  height: 20vh;
  overflow: hidden;
  background-color: #ededed;
  color: #000;



}
@keyframes slideUp {
    0% { transform: translateY(calc(100%   10px)); }
    100% { transform: translateY(0); }
}
#notification.slide {
    animation: slideUp 2.5s ease forwards;
}

<button id="openNotification">
Open notification
</button>


<!--If I remove the (style="visibility: hidden;") the animation works as expected-->
<div id="notification" style="visibility: hidden;">
121
</div>