使用 JavaScript 检查元素是否在 CSS 中设置了过渡

Question

我有一个过渡集：

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

在 CSS 中：

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

如果我没有在 CSS 中设置过渡，则该transitionend事件将永远不会触发。

有没有办法检查元素是否设置了过渡？

Answer 1

尝试使用getComputedStyle().getPropertyValue()这里。过渡的默认值为all 0s ease 0s，如果未应用于元素

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>