CODEWITHSUNDEEP
jqueryhtmlcsscss-animations
Roeland
Roeland

Reputation: 3858

Unable to get a CSS3 animation to work when showing content through Jquery

I am trying to create an expandable table that uses css3 animations when the table is expanded. Essentially when you toggle details, we append a new row to the table. This content has bars inside of it that should have a marker that animates left to right based on a width set in the bar marker data attribute. <div class="marker" data-width="50"></div>

Unfortunately I cannot get to animation to work on toggle. Oddly enough, I can create a seperate button to "re-render" and it animates perfectly then.

Its hard to really explain any further then this so please check out the fiddle that demonstrates the problem:

https://jsfiddle.net/vmef28df/21/

Any help would be greatly appreciated!

Upvotes: 1

Views: 34

Answers (1)

user2218824
user2218824

Reputation:

The problem is that you cannot animate elements right after adding them to the DOM. Same happens if you have an element with display: none; and opacity: 0; and you want to animate it to opacity: 1;. What you have to do is to use either requestAnimationFrame or use a timeout. I added the timeout to your JSFiddle

Upvotes: 2

Related Questions