如何使用setTimeout让HTML元素的指定CSS类延迟3秒生效？

你可以通过以下3种方式实现3秒延迟生效的需求：

方案1：修改服务端输出逻辑+JS控制类添加（最稳妥） #

先把PHP中直接加类的逻辑改成打标记，再由JS延迟加类，代码如下：

PHP代码修改 #

<?php
$x = rand(1,3);
?>

<div class="first" <?php if($x == 1){ echo 'data-add-second="true"'; }?>></div>
<div class="first" <?php if($x == 2){ echo 'data-add-second="true"'; }?>></div>
<div class="first" <?php if($x == 3){ echo 'data-add-second="true"'; }?>></div>

JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  const targetEls = document.querySelectorAll('[data-add-second="true"]');
  setTimeout(() => {
    targetEls.forEach(el => el.classList.add('second'));
  }, 3000);
});

方案2：不修改PHP逻辑，JS先移除再回加类 #

如果不方便改PHP的输出代码，可以直接用JS先移除渲染时自带的second类，3秒后再加回来：

document.addEventListener('DOMContentLoaded', function() {
  const targetEls = document.querySelectorAll('.first.second');
  // 先移除初始渲染的second类
  targetEls.forEach(el => el.classList.remove('second'));
  // 3秒后重新添加
  setTimeout(() => {
    targetEls.forEach(el => el.classList.add('second'));
  }, 3000);
});

方案3：纯CSS过渡延迟（仅样式需求适用） #

如果你的second类只有样式效果，没有JS依赖该类做逻辑判断，可以直接用CSS过渡实现延迟：

.first {
  /* 初始状态样式示例 */
  background: #ccc;
  opacity: 0.5;
  /* 所有属性变化延迟3秒生效 */
  transition: all 0s 3s;
}
.second {
  /* second类的样式示例 */
  background: #f00;
  opacity: 1;
  transition: all 0s 3s;
}

注意：该方案下.second类会直接存在于DOM属性中，仅样式延迟生效，若有JS逻辑依赖.second类选择器，该方案不适用。

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