Check if element has transition set in CSS using JavaScript

Question

I have a transition set:

element.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
    scrollActive = false;
}).css({
    '-webkit-transform': '' + prop + '(' + value + 'px)',
    '-ms-transform': '' + prop + '(' + value + 'px)',
    'transform': '' + prop + '(' + value + 'px)'
});

and in CSS:

.element {
    transition: transform ease-in-out 0.3s;
}

If I don't have transition set in CSS, the transitionend event will never fire.

Is there a way to check if element has transition set?

window.getComputedStyle(element);

Jay Harris
– Jay Harris

2018-03-30 05:14:24 +00:00
Commented Mar 30, 2018 at 5:14 — Jay Harris
– Jay Harris, Commented Mar 30, 2018 at 5:14
developer.mozilla.org/en-US/docs/Web/API/Window/…

Jay Harris
– Jay Harris

2018-03-30 05:14:36 +00:00
Commented Mar 30, 2018 at 5:14 — Jay Harris
– Jay Harris, Commented Mar 30, 2018 at 5:14

Bhuwan · Accepted Answer · 2018-03-30 05:20:08Z

5

Try to use getComputedStyle().getPropertyValue() here. The default value of transition is all 0s ease 0s, if not applied in an element

var elem = document.querySelector(".element");
var style = window.getComputedStyle(elem, null).getPropertyValue("transition");
if (style === "all 0s ease 0s") {
  console.log("Not set");
} else {
  console.log("Set");
}

.element {
  transition: transform ease-in-out 0.3s;
}

<div class="element"></div>

answered Mar 30, 2018 at 5:20

Bhuwan

16.9k5 gold badges38 silver badges62 bronze badges

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

Comments

Jay Harris · Accepted Answer · 2018-03-30 05:18:42Z

2

Window.getComputedStyle()

 const styles = window.getComputedStyle(element);

 const hasTransition = styles.transition !== "all 0s ease 0s";

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

The Window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.

WARNING: This function is very expensive to calculate.

answered Mar 30, 2018 at 5:18

Jay Harris

4,27120 silver badges22 bronze badges

Collectives™ on Stack Overflow

Check if element has transition set in CSS using JavaScript

2 Answers 2

Comments

Window.getComputedStyle()

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Window.getComputedStyle()

Comments

Your Answer

Sign up or log in

Post as a guest

Related