Understanding how to identify the CSS transition state with JavaScript and bypassing it

Question

Understanding how to identify the CSS transition state with JavaScript and bypassing it

Take a look at this particular div:

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

Here is its styling:

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

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

I am interested in being able to determine the state (whether it is currently animating or not) of #someid using JavaScript, and potentially end the animation if possible. I attempted something similar to the solution provided in this response:

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

However, this did not work for an element that was already in the midst of an animation.

The goal is to be able to identify whether the element is currently animating, and if so, either wait for the animation to finish or halt it immediately, without taking any action if it is not animating.

I have already come across information regarding the transitionend event, but unfortunately it does not provide insight into whether an element is presently animating.

javascript css css-transitions

Answer 1

Answer №1

To monitor the transition event and deactivate it as needed, follow these steps:

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>

Answer 2

To monitor the transition event and deactivate it as needed, follow these steps:

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>

Understanding how to identify the CSS transition state with JavaScript and bypassing it

Answer №1

Similar questions

Update the appearance of a webpage using a custom JavaScript function

Deciphering the inner workings of React's DOM updates and mastering its application

Looking for assistance in designing SVG tabs?

Assistance needed: Creating a container with a rounded table design using CSS and HTML

What is the jquery alternative to the PHP 'if IP equals' condition?

Div expanding beyond intended size when media reaches maximum 468 pixels

VueJS allows for seamless image uploading using either a gallery of images or input files

Maintaining uniform cell width in tables even when some data is missing

Tips for expanding the IntelliSense analysis capacity of large CSS files

Simplify a structure within an object

Utilizing AngularJS Factory to Retrieve Data from PHP Service via $http Request

Guide on utilizing a variable within req.body in Node.js

Is it possible to modify the text displayed within a select element?

What steps can I take to ensure that an image does not exceed the size of its parent tag?

Calculate the difference and sum of time values with varying signs in JavaScript

Total of the Selected Rows

Connect an AngularJS UI-Select to a UI-Grid filter

Ways to secure and conceal JavaScript functions or files from being accessed by users

How can I create a label with a full width in Bootstrap?

Sending out a command does not equate to establishing Redux with an outcome