How to detect state of CSS transition via JS and skip it

Question

Consider such div:

<div id="someid"></div>

And it's style:

#someid {
  transition: background-color 10s ease;
  background-color: #FF0000;
  height: 100px;
  width: 100px;
}

#someid:hover {
  background-color: #FFFFFF;
}

I want to have a possibility to detect state (currently animating or not) of #someid via JS and/or end animation if that's possible. I've tried a thing from this answer:

document.querySelector("#someid").style.transition = "none";

but it didn't work for currently animating element.

The point is I need to detect whether element is animating now and if so, wait for animation to end or end it immediately, otherwise do nothing

I've already found transitionend event, but using it I can't detect whether element is animating at the moment.

I might be wrong, but I think this is not possible to get the current state at runtime ? stackoverflow.com/questions/51045403/… — Crocsx
– Crocsx, Commented Oct 2, 2020 at 3:09
@Crocsx ok, but is it possible to remove transition property so animation will end? — fas
– fas, Commented Oct 2, 2020 at 3:12
@fas take a look at my code, it is removing transition as soon as it is ended and you no longer see it afterwards. — Dipen Shah
– Dipen Shah, Commented Oct 2, 2020 at 3:15
@DipenShah removing transition as soon as it is ended I need to remove ongoing transition — fas
– fas, Commented Oct 2, 2020 at 3:18
you can pause while running with AnimationPlayState, or you can set your transition into a specific css selector that you remove from the div when you want to forcefully stop the animation. but you got some other option in the comment on the answer. but basically with CSS you control it, he don't update for you ^^ — Crocsx
– Crocsx, Commented Oct 2, 2020 at 3:21

Dipen Shah · Accepted Answer · 2020-10-02 03:30:12Z

6

You can listen to transition event and remove it on demand:

const el = document.getElementById('transition');
let isAnimating = false;

el.addEventListener('transitionstart', function() {
  isAnimating = true;
});

el.addEventListener('transitionend', () => {
  isAnimating = false;
});

el.addEventListener('transitioncancel', () => {
  isAnimating = false;
});

function removeTransition(checkIfRunning) {
  if (checkIfRunning && !isAnimating) {
    return;
  }

  el.style.transition = "none";
}

#transition {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 1);
  transition-property: transform background;
  transition-duration: 2s;
  transition-delay: 1s;
}

#transition:hover {
  transform: rotate(90deg);
  background: rgba(255, 0, 0, 0);
}

<div id="transition">Hello World</div>
<br />
<button onclick="removeTransition(false)">Remove Transition</button>
<br />
<br />
<button onclick="removeTransition(true)">Remove Transition on if running</button>

edited Oct 2, 2020 at 3:30

answered Oct 2, 2020 at 3:12

Dipen Shah

26.2k1 gold badge37 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

fas Over a year ago

It might be a misunderstanding, but I need to detect whether element is animating now and if so, wait for animation to end or end it immediately, otherwise do nothing. Updated question.

Dipen Shah Over a year ago

So in my code I am removing transition at the end but you could modify it to fire cancel transition event whenever you like in between start and end and it should cancel it. Let me update my code a bit.

Dan Knights Over a year ago

@fas so long as the transitionstart event has fired, you can assume it is currently transitioning until transitionend. You could set an external variable isAnimating if that better fits your use case?

Dipen Shah Over a year ago

Take a look at my updates, I added remove transition button to remove transition on click at any point.

Kaiido Over a year ago

Since these events do bubble you can even build a more agnostic list: jsfiddle.net/pbzqw1f5

Collectives™ on Stack Overflow

How to detect state of CSS transition via JS and skip it

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related