Theodore Steiner Theodore Steiner - 3 months ago 21
Javascript Question

Accessing @keyframes through JS

I have a html/css/js modal working on a fadeIn and slideIn premise but I can't seem to make it do the reverse on a close...it simply makes a hard jump to being "not there."

My close function in JS is simply taking the modal.style.display="none" but is there a way to access the @keyframes I've added in my css to make a smooth reverse?

HTML:

<h2>Bottom Modal</h2>

<button id="button">Click Me</button>

<div id="modal">

<div id="modal-content">
<div id="modal-header">
<span id="close">&times</span>
<h2>modal header</h2>
</div>

<div id="modal-body">
<p>Some text in the modal body</p>
<p>Some other text in the modal body</p>
</div>

<div id="modal-footer">
<h2>modal footer</h2>
</div>

</div><!--modal-content-->
</div><!--modal div-->


CSS:

#modal
{
position: fixed;
z-index:1;
left:0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color:rgba(0,0,0,0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s;
display: none;
}

#modal-content
{
position: fixed;
bottom: 0;
backgroun-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s;

}

#close
{
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}

#close:hover, #close:focus
{
color: #000;
text-decoration: none;
cursor: pointer;
}

#modal-header
{
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

#modal-footer
{
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}

#modal-body
{
padding: 2px 16px;
background-color: white;
}

@-webkit-keyframes slideIn
{
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}

@keyframes slideIn
{
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn
{
from {opacity: 0}
to {opacity: 1}
}

@keyframes fadeIn
{
from {opacity: 0}
to {opacity: 1}
}


JS:

var modal = document.getElementById("modal");

var button = document.getElementById("button");

var close = document.getElementById("close");

button.onclick = function()
{
modal.style.display="block";
};

close.onclick = function()
{
modal.style.display="none";
};

window.onclick = function(event)
{
if(event.target == modal)
{
modal.style.display="none";
}
};

Answer

Based on posted question:

  • one cannot access @keyframes rules - without huge hacks (getting css as a text and parsing rules with regular expression, and even that you can't do in 100% cases)

  • accessing keyframe rules wouldn't help in what you are asking

  • Any animation is impossible after setting display:none

  • however, you can dynamically generate, activate, stop and play-again @keyframe animations via Javascript library like jQuery.keyframes

Comments