4

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.

fas
  • 1,393
  • 10
  • 20
  • I might be wrong, but I think this is not possible to get the current state at runtime ? https://stackoverflow.com/questions/51045403/get-the-state-of-a-css-animation-in-javascript-and-print-it-inside-an-element-or – Crocsx Oct 02 '20 at 03:09
  • @Crocsx ok, but is it possible to remove transition property so animation will end? – fas Oct 02 '20 at 03: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 Oct 02 '20 at 03:15
  • @DipenShah _removing transition as soon as it is ended_ I need to remove ongoing transition – fas Oct 02 '20 at 03: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 Oct 02 '20 at 03:21
  • I've found a solution similar to this https://stackoverflow.com/a/43096306/3365922: add a class with `transition: none !important;` style property, this would end ongoing transition immediately. – fas Oct 02 '20 at 03:36

1 Answers1

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>
Dipen Shah
  • 25,562
  • 1
  • 32
  • 58
  • 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. – fas Oct 02 '20 at 03:16
  • 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. – Dipen Shah Oct 02 '20 at 03:18
  • 1
    @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? – Daniel_Knights Oct 02 '20 at 03:20
  • 1
    Take a look at my updates, I added remove transition button to remove transition on click at any point. – Dipen Shah Oct 02 '20 at 03:25
  • 2
    Since these events do bubble you can even build a more agnostic list: https://jsfiddle.net/pbzqw1f5/ – Kaiido Oct 02 '20 at 03:55