delayed hide element after css transition completes - html

Question

There are couple of similar questions around. But here's a little change in the case.
I am using CSS3 transition to show a small div in the bottom of the page. When I set the class .show, it slides up and when I remove it, it slides down and goes out of the page.
.bar {
transition: bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
bottom: -44px;
}
.bar.show {
opacity: 0.85;
bottom: 0;
transition: bottom 0.3s ease-out, opacity 0.3s;
}
My problem is, though it goes away, it still is a display:block element. Which causes my body have scroll. Is there any way by which I can set display:none (using CSS only) after transition? Or some how convince body not to have scroll? (I already have overflow: hidden).
Since transition-delay don't work on display property. I tried visibility, but still the browser keeps some space for scroll.
Update:
Just incase we don't find any good solution, I've done it this way for now instead of display: none.
.bar {
transition: max-height 0s linear 0.3s, bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
bottom: -44px;
max-height: 0;
overflow: hidden;
border-top-width: 0;
padding: 0;
}
.bar.show {
opacity: 0.85;
bottom: 0;
max-height: 50px;
padding: 5px;
border-top-width: 1px;
transition: bottom 0.3s ease-out, opacity 0.3s;
}

Answer 1

Here's something that could be useful, I've essentially implemented this via position:fixed, check this fiddle to see if it's something that meets your requirements - http://jsfiddle.net/7x0oajv2/
Second approach could be using position:absolute with a overflow:hidden on the body like so - http://jsfiddle.net/7x0oajv2/1/

Answer 2

I would try to set the margin as following:
height of the division = x
margin-bottom: -x;
Not sure if this works but I think it should. Otherwise you might use
position: fixed;
Or the third possible solution would be to not let the division slide out at the bottom but on the left side. This can be done like this:
.bar {
transition: bottom 0.3s ease-out, opacity 0.3s;
opacity: 0;
left: -100px;
}

Answer 3

If you want to change CSS dynamically you must use JavaScript or jQuery to change DIVs property.
E.g
$.("#myDiv").removeClass('displayBLOCK');
$.("#myDiv").addClass('displayNONE');
CSS:
.displayNONE{
display: none;
}
.displayBLOCK{
display: block;
}
If you just want to remove the div, call $.('#myDiv').hide(). You don't need to set display property to "none".