如何用JavaScript检测元素是否设置了CSS Transition？

当然有办法解决这个问题！当元素没有设置有效的CSS过渡时，transitionend事件确实不会触发，提前检测能避免代码逻辑卡住。下面分享几个实用的方案：

1. 读取计算样式（最可靠的方法） #

通过window.getComputedStyle()获取元素最终的计算样式，检查过渡相关的属性值，判断是否存在有效的过渡：

function hasValidTransition(element) {
  const computedStyle = window.getComputedStyle(element);
  
  // 检查过渡属性是否不是默认的'none'
  const hasTransitionProp = computedStyle.transitionProperty !== 'none';
  // 检查过渡时长是否大于0（0s意味着没有过渡动画）
  const hasNonZeroDuration = computedStyle.transitionDuration !== '0s';
  
  // 同时满足两个条件才说明有有效的过渡
  return hasTransitionProp && hasNonZeroDuration;
}

// 使用示例
const targetElement = document.querySelector('.element');
console.log(hasValidTransition(targetElement)); // 返回true或false

补充说明： #

• transitionProperty如果是多个属性用逗号分隔（比如transform, background-color），只要其中有一个不是none，就会满足hasTransitionProp的条件。
• transitionDuration同样支持多个时长（和过渡属性一一对应），只要有一个时长大于0s，hasNonZeroDuration就会返回true。

2. 检查内联样式（局限性较大） #

如果你确定过渡是通过内联样式设置的，可以直接读取元素的style.transition属性，但这个方法无法检测外部CSS或<style>标签里设置的过渡：

function hasInlineTransition(element) {
  return element.style.transition !== '';
}

这个方法只适合特定场景，一般不推荐作为通用方案。

结合你的代码场景优化 #

在你的代码中，可以先检测元素是否有有效过渡，再决定是绑定transitionend事件还是直接执行回调逻辑：

const element = document.querySelector('.element');
let scrollActive = true;
const prop = 'translateY';
const value = 100;

if (hasValidTransition(element)) {
  // 有过渡，绑定事件等待结束
  element.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
    scrollActive = false; 
  });
} else {
  // 无过渡，直接执行回调
  scrollActive = false;
}

// 应用变换样式
element.style.cssText = `
  -webkit-transform: ${prop}(${value}px);
  -ms-transform: ${prop}(${value}px);
  transform: ${prop}(${value}px);
`;

这样就不用担心因为没有过渡而导致scrollActive一直处于true的状态了。

内容的提问来源于stack exchange，提问作者Toniq