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>

标签： javascripthtmlcss

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>