I have an element, which has its css style controlled by javascript, simply by adding/removing classes.
For example, I have a hide class, which I apply to an element when I want it to hide, and when the element is hidden the page restructures as if the content was never there (collapse). This is great.
I now want the item to fade out first, and then collapse but I'm lost.
My effort is
document.getElementById("clicky").addEventListener("click", changeMe);
function changeMe() {
var ele = document.getElementById("item");
ele.className= "hide";
}#clicky{cursor:pointer;}
.hide {
animation: fadeout 1s ;
-webkit-animation: fadeout 1s ; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes fadeout {
from {
display:block;
visibility:visible;
opacity: 1;}
to {
display:none;
visibility:hidden;
opacity:0;}
}
/* Standard syntax */
@keyframes fadeout {
from {
display:block;
visibility:visible;
opacity: 1;}
to {
display:none;
visibility:hidden;
opacity:0;}
} <a id="clicky">Click me</a>
<br /><br />
<div>I remaine!</div>
<div id="item">I should go bye byes but also collapse so the page can re-organise when I disapear!!!!!</div>
<div>I should stay forever but move physically up the page when the line above disappears!</div>I would just animate values of max-height in fadeout, e.g.
@keyframes fadeout {
from {
max-height: 999px;
opacity: 1;
}
to {
max-height: 0;
opacity:0;
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments