0

I'd like to use animate.css to slide my content out when I toggle the display upon title clicks.

Here's what I currently have:

*/ With Animate.css /*

https://jsfiddle.net/rgLf0mhv/

And here's what I'm trying to achieve:

*/ With jQuery /*

https://jsfiddle.net/cm7a9jr7/

How can I achieve this effect with Animate.css (or vanilla CSS) ?

  • you can add a class on click that applies styles, thats all animate.css is doing. you cannot animate `height: auto;` so you will have to set a fixed height to animate with css – Tyler Fowle Dec 21 '17 at 23:23
  • @TylerFowle is there a lighter animation library than jQuery that easily achieves this auto-sized slide effect? The height varies by the amount of content, so it's inherently a non-fixed sized element. I've seen hacks that set a large max-height, but this ends up delaying the effect. (eg. https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) –  Dec 21 '17 at 23:28
  • 1
    check out velocity.js http://velocityjs.org/ – Tyler Fowle Dec 21 '17 at 23:38
  • @TylerFowle I think that's going to be the best solution. Thanks! –  Dec 22 '17 at 00:19

0 Answers0