CODEWITHSUNDEEP
csscss-animationstransition
matsko
matsko

Reputation: 22183

Detecting if a transition takes off

Is there a way to detect if the combination off applied CSS classes causes a transition to kick off?

Let's say you have an element that contains the following CSS class:

.my-class {
  transition:1s linear all;
}

And let's say you add this class to the element:

.red {
  background:red;
}

The animation may or may not take off. This depends on the state of the element and the transition property. The following factors effect it such that it does not take off:

  1. If the background color of the element is already red.
  2. If the transition-property is not all and a property that isn't background color.
  3. If the .red CSS class' red value doesn't win against the existing background color value (incase a heavier CSS selector is present on the element).
  4. If the .red CSS class doesn't exist at all, but is still applied to element.

These cases prevent a library or framework from knowing if an animation has run and they in turn need to provide a setTimeout operation to run in the background to cleanup the animation after the duration incase nothing was triggered. This is a problem since it leads to messy code and issues.

If there anyway to detect to see if an element's transition animation is actually in progress? It would be very helpful if there was something like transitionstart to detect this. Is there some property or flag that gets set on the element and/or document where I can query to see if the transition animation is en-route?

The ONLY way I can see this working is if you, after one or two animation frames, do a deep copy and compare the data returned from getComputedStyle. You'll need to do a deep copy twice since getComputedStyle returns a pointer and not an actual object. There is no way I'm doing this one :D

Incase you're wondering, the way that I'm getting the animation to take is by:

  1. Running getComputedStyle on the element to detect its transition-duration value.
  2. If duration > 0 then, add the CSS class and wait for requestAnimationFrame to run. This is what triggers the animation.
  3. Wait for transitionend and, if that doesn't run, then wait for the timeout to clean it up.

Upvotes: 2

Views: 101

Answers (1)

Jesse
Jesse

Reputation: 386

Nope, there isn't a transitionstart event like there is for animation. You basically already outlined the best way to determine that, using computed style. Perhaps using animations which you can control better would be the easiest solution?

Here's a great article on the subject: http://css-tricks.com/controlling-css-animations-transitions-javascript/

Upvotes: 1

Related Questions