如何反转webkit过渡效果？实现content div从模糊到清晰的过渡

嘿，这个问题我之前折腾过好几次！其实核心逻辑特别简单——你只需要**交换过渡效果的「起始状态」和「结束状态」**就行，毕竟现在你的代码是默认清晰、触发后模糊，反过来调整默认和触发样式就搞定了。

我给你一步步拆解：

1. 先看你可能的原有代码（反向效果） #

通常你现在的代码大概是这样的：默认状态是清晰，添加类/触发伪类后变成模糊：

.content {
  /* 默认清晰 */
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.content.blur {
  /* 触发后模糊 */
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

2. 反转过渡的核心修改 #

把默认状态改成模糊，触发后的状态改成清晰就OK了：

/* 默认状态：模糊 */
.content {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  /* 建议指定具体过渡属性，别用all，性能更优 */
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
}

/* 触发后的状态：清晰 */
.content.clear {
  -webkit-filter: blur(0);
  filter: blur(0);
}

3. 触发过渡的方式 #

如果是通过JavaScript触发，只需要给元素加上clear类就行：

// 比如页面加载完成后触发
document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.content').classList.add('clear');
});

如果是用伪类（比如hover）触发，就改成：

.content {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
}
/* 鼠标悬停时变成清晰 */
.content:hover {
  -webkit-filter: blur(0);
  filter: blur(0);
}

小提示 #

虽然现在主流浏览器都支持不带前缀的filter和transition，但如果要兼容旧版WebKit内核浏览器（比如老版Safari），记得保留-webkit-前缀，就像上面代码里那样。

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