Angular 14.1+TailwindCSS 3.2.4 意外过渡延迟问题解决咨询

使用Angular 14.1与TailwindCSS 3.2.4搭建网站，当前CSS代码如下：

*, ::after, ::before{
  transition: background-color 0.3s, color 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0ms;
}

.text-color{
  @apply text-neutral-900 dark:text-slate-50;
}
.text-color-hover{
  @apply hover:text-[#F1C203] dark:hover:text-[#F1C203];
}

这段代码为站点所有元素设置过渡属性，通过text-color类定义明暗模式的文本颜色，text-color-hover类定义hover状态的文本颜色。

对应的HTML结构：

<div class="text-color text-color-hover font-normal mb-2 cursor-pointer">
  <span class="text-5xl">Films</span>
  <span class="text-5xl">>>></span>
</div>

当前问题：hover任意一个span标签时，两个span都会变色（符合预期），但颜色过渡存在与过渡时长（0.3s）相等的意外延迟，如何消除该延迟？

方法1：移除全局过渡，仅给目标元素添加过渡 #

全局给所有元素（包括伪元素）设置过渡容易引发样式冲突，建议只给需要文本颜色过渡的元素添加过渡属性：

/* 移除全局的*, ::after, ::before过渡设置 */
.text-color{
  @apply text-neutral-900 dark:text-slate-50;
  /* 仅给文本颜色添加过渡 */
  transition: color 0.3s ease-in-out;
  transition-delay: 0s;
}
.text-color-hover{
  @apply hover:text-[#F1C203] dark:hover:text-[#F1C203];
}

方法2：修正全局过渡的延迟设置并明确作用范围 #

如果需要保留全局过渡，确保transition-delay的取值格式统一（用s而非ms，避免浏览器解析异常），同时强制覆盖hover状态的延迟属性：

*, ::after, ::before{
  transition: background-color 0.3s ease-in-out 0s, color 0.3s ease-in-out 0s;
}

.text-color{
  @apply text-neutral-900 dark:text-slate-50;
}
.text-color-hover{
  @apply hover:text-[#F1C203] dark:hover:text-[#F1C203];
  /* 强制消除hover时的过渡延迟 */
  transition-delay: 0s;
}

原理说明 #

问题根源在于全局过渡的继承性：父元素hover触发子元素颜色变化时，子元素继承的全局过渡设置可能被浏览器错误解析，导致延迟生效。将过渡限定在目标元素上，或明确覆盖hover状态的延迟属性，即可消除意外延迟。

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