我有一个文本，我想对它应用两个不同的关键帧动画，命名为animeUp和animeDown。另外，我希望能够使用 javascript 控制动画。期望的结果是一段 javascript 代码来启动animeUp动画，而另一行代码用来启动animeDown...我尝试通过添加改变的 CSS 类来播放和暂停动画，animation-play-state但使用这种方法我只能控制其中一个动画！注意：我们想要关键帧动画，因为它们是......//pause the animation at firstdocument.getElementById("Text").classList.add("paused");//after 2 seconds initiate the animationsetTimeout(function(){ document.getElementById("Text").classList.add("played");}, 2000)html{ overflow:hidden;}#Text{ position: absolute; overflow: hidden; font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 7.5vw; color: rgb(242, 242, 242); left: 1vw; top: -45vh; animation: animeUp 0.5s ease-out ; animation: animeDown 0.5s ease-in ; animation-fill-mode: forwards;}@-webkit-keyframes animeUp { from { top: 10vh } to { top: -50vh }}@-webkit-keyframes animeDown { from { top: -50vh } to { top: 10vh }}.paused { -webkit-animation-play-state: paused !important; }.played { -webkit-animation-play-state: running !important; }<!DOCTYPE html><html><head></head><body><div class = "container"> <p id="Text">Tutorial</p></div></body></html>
1 回答
qq_花开花谢_0
TA贡献1835条经验 获得超7个赞
为每个动画创建一个类并在两者之间切换。
我拼凑了一个演示，没有什么太花哨的，只是为了传达这个想法。
document.querySelector('.up').onclick = (e) => {
document.getElementById("Text").classList.add("animeup");
document.getElementById("Text").classList.remove("animedown");
e.target.disabled = "true";
document.querySelector('.down').removeAttribute("disabled");
}
document.querySelector('.down').onclick = (e) => {
document.getElementById("Text").classList.remove("animeup");
document.getElementById("Text").classList.add("animedown");
document.querySelector('.up').removeAttribute("disabled");
e.target.disabled = "true";
}
html {
overflow: hidden;
}
#Text {
position: absolute;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 7.5vw;
color: red;
left: 1vw;
top: -50vh;
animation-fill-mode: forwards;
}
@-webkit-keyframes animeUp {
from {
top: 10vh
}
to {
top: -50vh
}
}
@-webkit-keyframes animeDown {
from {
top: -50vh
}
to {
top: 10vh
}
}
.animeup {
animation: animeUp 0.5s ease-out;
}
.animedown {
animation: animeDown 0.5s ease-in;
}
<button class="up" disabled>Up</button>
<button class="down">Down</button>
<div class="container">
<p id="Text">Tutorial</p>
</div>
添加回答
举报
0/150
提交
取消