JavaScript 背景色的淡出过渡效果不起作用

问题描述

我有一个按钮，当点击它时页面会滚动到特定的div，并且将其高亮显示为黄色，但我无法让其以淡出的方式消失，而不仅仅是直接消失。以下是我的代码：

function Go_to_file_creator() {
  var divElement = document.getElementsByClassName('form')[0];
  divElement.scrollIntoView();
  divElement.classList.add('highlighted');

  setTimeout(function() {
    divElement.classList.remove('highlighted');
  }, 1000);
}

#toFileCreator {
  margin-right: 90vw;
  z-index: 999;
  margin-bottom: 20px;
  margin-left: 20px;
}

.highlighted {
  background-color: yellow;
  transition: background-color 1s;
}

<button onclick="Go_to_file_creator()" id="toFileCreator">
  <h1>File creator</h1>
</button>

解决方案

要使您的代码实现 淡入 和 淡出 ，您需要有一个前向和逆向的过渡。原始代码只有一个前向过渡。因此，当您移除类时，背景颜色 的变化是瞬时的。

在您的CSS中添加以下行：

.form {
  transition: background-color 3s;
}

运行代码片段以了解其工作原理。

代码片段

function Go_to_file_creator() {
  var divElement = document.getElementsByClassName('form')[0];
  divElement.scrollIntoView();
  divElement.classList.add('highlighted');

  setTimeout(function() {
    divElement.classList.remove('highlighted');
  }, 1000);
}

#toFileCreator {
  margin-right: 90vw;
  z-index: 999;
  margin-bottom: 20px;
  margin-left: 20px;
}

.form {
  transition: background-color 3s;
}

.form.highlighted {
  background-color: yellow;
  transition: background-color 1s;
}

<div class="form">
  <button onclick="Go_to_file_creator()" id="toFileCreator">
    <h1>File creator</h1>
  </button>
</div>