颜色过渡不适用于 setTimeout。元素应该看起来很平滑[重复]

Question

颜色过渡有效，如果我不隐藏元素然后让它出现。

const name = document.querySelector(".name");

setTimeout(() => {
  name.classList.remove("hide");
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000)

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s;
  color: transparent;
}
.color-blue { color: blue; }

.hide { display: none }

<div class="name hide">
  Lebron James
</div>

如果我不使用类 hide 并且以后不将其删除，则过渡有效。通过隐藏它，它不起作用。

不知道发生了什么

感谢您的帮助

Answer 1

这是工作代码

const name = document.querySelector(".name");

setTimeout(() => {
  name.classList.remove("hide");
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000)

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s;
  color: transparent;
}
.color-blue { color: blue; }

.hide { opacity: 0 }

<div class="name hide">
  Lebron James
</div>

http://jsfiddle.net/Aravi/39pdLarn/2/

显示在动画方面有限制，但您可以使用可见性和不透明度进行过渡。

Answer 2

使用opacity 设置opacity:0 隐藏元素。

了解opacity:https://www.w3schools.com/css/css_image_transparency.asp

const name = document.querySelector(".name");

setTimeout(() => {
  name.classList.remove("hide");
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000)

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s;
  color: transparent;
}
.color-blue { color: blue; }

.hide { opacity:0; }

<div class="name hide">
  Lebron James
</div>

Answer 3

那是因为你使用的是display: none;。

如果您将display 设置为none，CSS 将无法显示动画。您可以使用opacity: 0 隐藏元素，但记得将其添加到transition，否则它不会显示任何颜色过渡。

const name = document.querySelector(".name");

setTimeout(() => {
  name.classList.add("hide");
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000);

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s, opacity 10s;
  color: transparent;
}

.color-blue {
  color: blue;
}

.hide {
  opacity: 0;
}

<div class="name">
  Lebron James
</div>

或者，如果您想使用display: none（即从 DOM 中删除元素），那么您可以按如下方式更新您的 JS 代码：

const name = document.querySelector(".name");

setTimeout(() => {
  setTimeout(() => {
    name.classList.add("hide");
  }, 10000);
  name.classList.add("color-blue")
  // name.style.color = "blue";
}, 2000)

.name {
  background-color: orange;
  display: inline-block;
  padding: 5px;
  transition: color 10s;
  color: transparent;
}

.color-blue {
  color: blue;
}

.hide {
  display: none
}

<div class="name">
  Lebron James
</div>