javascript - CSS嵌套(tr，td)颜色过渡时间堆叠

Question

在这个例子中，我有一个包含“标记”单元格和“长按”单元格的表格。

我的目标:

• 单击“标记”单元格“标记”该行。 Javascript 切换“标记”类(灰色背景和白色文本)。

• 按住点击长按单元格可在 1 秒内转换文本和背景颜色。在实践中，我有一些 javascript 会在延迟后在编辑器中进行交换，但我在这个示例中将其排除在外。

我遇到的问题是行转换和单元格转换似乎是堆叠的，尽管只是针对文本颜色(我对此非常困惑)。因此，当我标记该行时，整行背景在 0.5 秒内变为灰色，然后文本变为白色，看起来很奇怪。

如果我从长按单元格中删除过渡，那么行过渡会正常工作，但随后单元格会在单击释放时快速恢复到默认状态，我希望它能恢复正常。

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 td { border: 1px solid black; }
table tr {
	transition: 0.5s;
}
tr.marked {
	background: gray;
	color: white;
}
tr td:nth-child(2) {
	transition: 1s;
}
tr td:nth-child(2):active {
	transition: 1s 0.2s;
	background: aqua;
	color: blue;
}

<table>
</table>

Answer 1

您在 tr td:nth-child(2) 中定义了一个额外的过渡，它会导致重叠。删除它，事情应该按预期工作。

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 td {
  border: 1px solid black;
}

table tr td {
  transition: 0.5s;
}

tr.marked {
  background: gray;
  color: white;
}

tr td:nth-child(2):active {
  transition: 1s 0.2s;
  background: aqua;
  color: blue;
}

<table>
</table>