Adding css3 transitions to tabs and collapse

[felipefialho]

The 'collapse' transition did not work here :(

But, the 'tab' transition worked fine

[franciscop]

I know one way to add transition to the collapse, but it's really hacky. You set max-height: 0 when collapsed, and max-height to a really high number when uncollapsed. The main problem is that the transition speed will be dependent on the max-height, so set it really high and it will be too fast to be noticeable, set it too low and you might run into problems of cutting content. Also it should be linear instead of ease as it will take into account the max-height when doing the transition.

Another problem is that it will have a delay when closing, corresponding to the difference between the actual height and the max-height.

You can see the collapse transition in action in this jsfiddle.

[felipefialho]

Ah, yes. I created a Codepen the experiment dealing with exactly what you said. The problem is that the calculation of the time have to be static, this can cause problems.

http://codepen.io/LFeh/pen/ICkwe

However I'm going to merge in your branch, the effect on the tabs really cool.

[Praveen-Innocent]

Thanks for the detailed explanation @FranciscoP and @LFeh Unfortunately no animation can be done on display: block to display:none or even height:0 to height:auto Will remove the transition from collapse.

[raphaelfabeni]

Yes, this is something I really like CSS could do. But I think, in near future we could use animation/transition for display and height:auto.

Some time ago, I presented a talk about it and I made some examples for study. Tabs and Accordion

[felipefialho]

Yes @raphaelfabeni, I believe this will be possible in a near future.

@Praveen-Innocent You can remove the transition? Remember to clone the new version.