How to handle transitionend on new row?

How to handle transitionend on new row?

coffeefedoracoffeefedora Posts: 2Questions: 1Answers: 0

I am attempting to use a CSS transition effect with new rows.

What I do is start a transition for the background, and when transitionend is fired, I reverse it, and then clean up the css used.

This works fine everywhere but in Datatables. the transition will start, but the end is never triggered. I feel like this happens because of some internal DOM manipulation which interrupts the browser. Either moving the element, or some sort of clone operation which generates a new "non-transitioning" row.

How can I detect new rows added and render the transition when they are visible? rowCallback doesn't seem to be the right place. the drawCallback fires multiple times, so I am unable to know when is the "last" draw.

https://jsfiddle.net/oug56hen/

Answers

  • coffeefedoracoffeefedora Posts: 2Questions: 1Answers: 0

    i was actually able to get it working with the draw callback. I'll have to see what's going on in my code, but I think I am seeing 2 or 3 draw events fire, which is the root issue.

    https://jsfiddle.net/oug56hen/1/

    working fiddle.

Sign In or Register to comment.