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

尝试像这样在悬停时添加transition：

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;
  transition: background-color 0.5s ease-in-out 0s;
}

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

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

重要

transition-delay上的

#test为1s，仅表示将动画延迟1秒钟。但是transition-delay上的#test:hover表示仅当您将鼠标悬停时才应用延迟。当您将鼠标移开时，它不受影响。

编辑

如果您希望使用其他方法，还可以在#test上使用伪元素，您可以在悬停时设置其他时间。

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{
  transition: background-color 0.5s ease-in-out 0s;
  position:absolute;
  content:"";
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:-1;
}

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

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

也，如果您不希望“悬停”动画，可以将transition: background-color 0.5s ease-in-out 0s;移至body.loaded #test:hover::after，以便仅在“悬停”时获取动画不是“悬停”。

Answer 2

使用CSS的解决方案可以在#test上使用伪元素，然后将：hover 效果委派给其他时间。

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>

Answer 3

不添加伪元素的替代方法。您可以添加animate类，然后添加setTimeout添加loaded。这将使您可以设置与悬停不同的初始加载样式。

window.addEventListener("load", () => {
  document.querySelector("body").classList.add("animate");
  setTimeout(function() {
    document.querySelector("body").classList.add("loaded");
  }, 1000);
});

#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{
  transition: background-color 0.5s ease-in-out 0s;
}
body.loaded #test:hover {
  background-color: cyan;
}

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

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

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

3 个答案: