Restarting a CSS3 Animation with Javascript in React

I've been working on animation in my project at Salesforce.com and I came across a challenge with animation. It's very easy to trigger animation using react props and states, but reseting animations are a different beast. In non-React Javascript, the solution would be:

1document.getElementById("tagID").classList.remove("animationClass")
2document.getElementById("tagID").classList.add("animationClass")
3

This would essentially just remove the class and then re-add it, effectively creating a "new" animation and reseting the cycle. However, React outsmarts this and doesn't recognize the toggled class. To overcome this obstacle use a setTimeout to delay adding the class. After it has been removed for a few milliseconds, re-add it. Example:

1document.getElementById("tagID").classList.remove("animationClass")
2setTimeout(function() {document.getElementById("tagID").classList.add("animationClass");}, 50);
3

This will outsmart react into thinking the animation was indeed removed. It will reset the animation before you start it again. Hope this helps!