CSS 在Javascript中检测CSS过渡效果（不使用modernizr）

在本文中，我们将介绍如何使用JavaScript来检测CSS过渡效果（transitions）。CSS过渡是一种CSS属性，用于在元素更改其属性时制造动画效果。通过检测CSS过渡，我们可以在需要时针对性地应用JavaScript逻辑。

要检测CSS过渡是否可用，我们一般会使用现代的检测库例如Modernizr。然而，如果我们不想依赖第三方库或者想要自己实现检测逻辑，我们可以使用一些JavaScript代码来实现。

阅读更多：CSS 教程

1. 利用计算属性检测

我们可以使用JavaScript计算属性来检测CSS过渡。具体步骤如下：

首先，我们创建一个测试元素，该元素将具有我们希望检测的CSS过渡效果。

<div id="test-element"></div>

然后，我们使用JavaScript获取该元素并为其添加CSS样式，包括过渡效果。

var testElement = document.getElementById('test-element');
testElement.style.transition = 'width 1s';

接下来，我们使用JavaScript计算属性来判断元素的transitionProperty属性是否被浏览器正确解析。

var computedStyle = window.getComputedStyle(testElement);
var transitionProperty = computedStyle.transitionProperty || computedStyle.webkitTransitionProperty;

if (transitionProperty && transitionProperty !== 'none') {
  console.log('CSS transitions are supported');
} else {
  console.log('CSS transitions are not supported');
}

通过判断transitionProperty是否存在且不为none，我们可以得知浏览器是否支持CSS过渡。

2. 利用事件监听检测

除了计算属性，我们还可以利用事件监听来检测CSS过渡是否可用。具体步骤如下：

首先，我们创建一个测试元素，该元素将具有我们希望检测的CSS过渡效果。

<div id="test-element"></div>

然后，我们使用JavaScript获取该元素并为其添加CSS样式，包括过渡效果。

var testElement = document.getElementById('test-element');
testElement.style.transition = 'width 1s';

接下来，我们可以使用JavaScript事件监听来检测CSS过渡是否生效。

var isTransitionSupported = false;

testElement.addEventListener('webkitTransitionEnd', transitionEndHandler);
testElement.addEventListener('transitionend', transitionEndHandler);

function transitionEndHandler(event) {
  if (event.propertyName === 'width') {
    isTransitionSupported = true;
    console.log('CSS transitions are supported');
  }
  testElement.removeEventListener('webkitTransitionEnd', transitionEndHandler);
  testElement.removeEventListener('transitionend', transitionEndHandler);
}

setTimeout(function() {
  if (!isTransitionSupported) {
    console.log('CSS transitions are not supported');
  }
}, 1000);

通过监听transitionend或webkitTransitionEnd事件，并检测属性名称是否为我们添加的过渡属性，我们可以得知浏览器是否支持CSS过渡。

3. 利用样式标志检测

除了计算属性和事件监听，我们还可以通过样式标志来检测CSS过渡是否可用。具体步骤如下：

首先，我们创建一个测试元素，该元素将具有我们希望检测的CSS过渡效果。

<div id="test-element"></div>

然后，我们使用JavaScript获取该元素，并为其添加CSS样式，包括过渡效果。

var testElement = document.getElementById('test-element');
testElement.style.transition = 'width 1s';

接下来，我们可以利用属性的计算值来检测CSS过渡是否生效。

var isTransitionSupported = false;

document.body.appendChild(testElement);
var computedStyle = window.getComputedStyle(testElement);
if (computedStyle.transition !== 'all 0s ease 0s') {
  isTransitionSupported = true;
  console.log('CSS transitions are supported');
}
document.body.removeChild(testElement);

if (!isTransitionSupported) {
  console.log('CSS transitions are not supported');
}

通过获取transition属性的计算值，并判断是否与我们设置的过渡样式一致，我们可以得知浏览器是否支持CSS过渡。