点击redbox无法触发greenbox颜色过渡效果，求排查原因

尝试通过点击.redbox元素切换.greenbox的changecolor类，实现颜色过渡，但效果未生效。相关代码如下：

JavaScript代码 #

document.querySelector('.redbox').addEventListener('click', function() {
  document.querySelector('.greenbox').classList.toggle("changecolor")
})

CSS代码 #

.redbox {
  transition: all 1s ease
}

.greenbox {
  transition: all 1s ease
}

.changecolor {
  background: yellow;
}

HTML代码 #

<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>

<div style="background:black;height:500px;width:500px;">
  <div class="greenbox" style="background:green;height:50%;width:100%;"></div>
  <div class="redbox" style="background:red;height:20%;width:100%;"></div>
</div>

问题原因 #

.greenbox的背景色是通过行内样式style="background:green"设置的，而行内样式的优先级高于CSS类选择器。当切换changecolor类时，类中的background: yellow会被行内样式覆盖，无法生效，因此过渡效果也不会触发。

解决方案 #

将.greenbox的背景色从行内样式移到CSS类中，让类之间的属性变化能够正常触发过渡：

修改后的CSS代码 #

.redbox {
  transition: all 1s ease;
  background: red;
  height: 20%;
  width: 100%;
}

.greenbox {
  transition: all 1s ease;
  background: green; /* 把行内的背景色移到这里 */
  height: 50%;
  width: 100%;
}

.changecolor {
  background: blue; /* 按你描述的改成蓝色，原代码是yellow */
}

修改后的HTML代码 #

<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>

<div style="background:black;height:500px;width:500px;">
  <div class="greenbox"></div> <!-- 移除行内的background、height、width -->
  <div class="redbox"></div> <!-- 移除行内的background、height、width -->
</div>

这样修改后，点击.redbox时，.greenbox的背景色会在绿色和蓝色之间平滑过渡。

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