CSS中tr与td颜色过渡时长叠加问题求助

这个问题我之前也碰到过，核心是元素过渡属性的作用范围冲突：当父元素（tr）和子元素（td）都使用了无指定属性的过渡（默认作用于所有可过渡属性）时，子元素的过渡规则会“接管”继承自父元素的属性变化，导致过渡时长不同步。

解决思路 #

我们需要明确区分父元素和子元素的过渡作用属性：

• 让tr的过渡只作用于它自身的背景色和文本颜色（也就是切换marked类时的变化）
• 让第二个td的过渡只作用于它自己主动修改的属性（也就是长按active状态时的背景色和文本颜色），避免影响继承自tr的文本颜色变化

修改后的代码 #

CSS部分（关键修改）

table td { border: 1px solid black; }
/* 明确指定tr过渡的属性，避免影响子元素 */
table tr { transition: background-color 0.5s, color 0.5s; }
tr.marked { background: gray; color: white; }
/* 给第二个td指定仅过渡自身变化的属性 */
tr td:nth-child(2) { transition: background-color 1s, color 1s; }
tr td:nth-child(2):active { 
  transition: background-color 1s 0.2s, color 1s 0.2s; 
  background: aqua; 
  color: blue; 
}

JavaScript和HTML部分（无需修改）

table = document.querySelector('table')
for (i=0;i<5;i++) {
 tr = document.createElement('tr')
 td1 = document.createElement('td')
 td1.innerText = 'Marker'
 td1.addEventListener('click', function () {
  this.parentNode.classList.toggle('marked')
 })
 td2 = document.createElement('td')
 td2.innerText = 'Long-press'
 td3 = document.createElement('td')
 td3.innerText = 'Other cell'
 tr.appendChild(td1)
 tr.appendChild(td2)
 tr.appendChild(td3)
 table.appendChild(tr)
}

<table> </table>

原理说明 #

1. 原来的代码中，tr和td都使用了transition: 0.5s/1s（默认等价于transition: all 0.5s），这意味着元素的所有可过渡属性变化都会应用各自的时长。当tr切换marked类时，td的文本颜色是继承自tr的，但td自己的过渡规则会强制这个继承属性的变化使用1s时长，而tr的背景色只用0.5s，导致视觉不同步。
2. 修改后，tr的过渡仅作用于自身的background-color和color，td的过渡仅作用于自身的background-color和color（也就是长按激活时的变化）。此时，td继承自tr的文本颜色变化会遵循tr的过渡时长，和背景色同步变化；而长按td时的颜色/背景变化依然保留你的延迟过渡效果，释放后也能平滑恢复到常态。

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