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

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上使用一个伪元素，并将不同时间的：悬停效果委托给它。

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 2

尝试在悬停时添加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>

重要

CCD_ 6在CCD_ 7上是1s，这仅仅意味着将动画延迟1秒。但#test:hover上的transition-delay意味着只有当您悬停时才应用延迟。它不会影响您何时移开鼠标。

编辑

如果你想要不同的方法，你也可以在#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 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>