CODEWITHSUNDEEP
javascriptjqueryangularjscsstransform
ChevCast
ChevCast

Reputation: 59213

How can I make this animation smoother?

I have a small plnkr that I'm using to play with AngularJS and ngAnimate. I'm now learning about css3 transitions and transform. The collapse/expand animation looks cool, but the element takes up all the space that it will eventually occupy before the animation completes. It's even worse on collapse because the text shrinks and disappears but then the container snaps closed instead of elegantly closing.

http://plnkr.co/edit/hzJlOstUCeH2sB47OstS?p=preview

I've been trying to simulate JQuery's slideDown animation but unless I know the height I'm animating to, I can't seem to get this animation to be smooth. Does anyone know how JQuery's slideDown function is able to smoothly animate variable height elements?

Upvotes: 2

Views: 100

Answers (1)

XrXr
XrXr

Reputation: 2057

I'm able to make the collapse/expand animation look smooth by changing line-height. This allow me to animate the lines without knowing the total height. Here is the demo. This might not be what you want it to look like, but it is smoother than before. I suspect JQuery's slideDown does something with the computed height, but I'm not sure.

Upvotes: 1

Related Questions