css - 加载和悬停同一对象的同一属性的不同过渡时间？

Question

我有一个具有“页面加载动画”的对象，我正在尝试向其添加悬停过渡。两种转换都使用相同的属性，例如背景颜色。我需要不同的加载和悬停时间。我应该如何实现这一目标？示例如下。

window.addEventListener("load", () => document.querySelector("body").classList.add("loaded"));

#test {
  padding: 1em;
  border: 1px solid black;
  border-radius: 0.5em;
  transition: background-color 1s ease-in-out 1s;
  background-color: black;
}

body.loaded #test:hover {
  background-color: cyan;
}

body.loaded #test {
  background-color: white;
}

<div align=center>
  <div id="test" style="display: inline-block;">Hello</div>
</div>

我到底想要实现什么:我希望将悬停动画定时为 0.5s ease-in-out 0s 同时将加载动画保持在 1s ease-in-out 1s 。两者都在 background-color 属性上运行。

Answer 1

使用 CSS 的解决方案可以在 #test 上使用伪元素，并以不同的时间将 :hover 效果委托(delegate)给它。

window.addEventListener("load", () => document.querySelector("body").classList.add("loaded"));

#test {
  padding: 1em;
  border: 1px solid black;
  border-radius: 0.5em;
  transition: background-color 1s ease-in-out 1s;
  background-color: black;
  position:relative;
}

body.loaded #test {
  background-color: transparent;
}

body.loaded #test::after{
  background-color:#ffffff;
  transition: background-color 0.5s ease-in-out 0s;
  position:absolute;
  content:"";
  top:0;
  left:0;
  height:100%;
  width:100%;
  border-radius: 0.5em;
  z-index:-1;
}

body.loaded #test:hover::after {
  background-color: cyan;
}

<div align=center>
  <div id="test" style="display: inline-block;">Hello</div>
</div>