I want to make an expandable block using css transitions.
.box { width: 300px; max-height: 30px; overflow: hidden; background: #aaa; -webkit-transition: max-height 400ms ease-in-out; -moz-transition: max-height 400ms ease-in-out; -ms-transition: max-height 400ms ease-in-out; -o-transition: max-height 400ms ease-in-out; transition: max-height 400ms ease-in-out;}.box.open { max-height: 999px;}Here’s working example: http://jsfiddle.net/qswgK/.
When I expand the block, it slides down well, yet when I want to collapse it, it occurs with some latency.
This is noticed in lastest versions Chrome, Firefox, Opera & IE.
Why does it happen & May I avoid this without using javascript animations?
P.S. If use height animation instead of max-height, collapse works well, yet I need collapse & expand block with unknown expanded height.
It looks that it happens because the collapsing animation starts to alter the max-height from the very large value & it takes to it some time to cross the actual height of the element, & the visible alter of the height starts only after that moment. The only workaround I see is to use separate animations for expansion & collapsing — a bit longer one with easing-in for the first & a bit shorter one that starts very sharply & eases out just before ending for the latter, like the following:
.box { width: 300px; max-height: 30px; overflow: hidden; background: #aaa; transition: max-height 300ms cubic-bezier(0, .6, .6, 1); /* for collapsing */}.box.open { max-height: 999px; transition: max-height 400ms ease-in; /* for expansion */}