我制作了一个自定义动画,在单击按钮时将其添加到 div。 但是,将名为“slideOutLeft”的自定义动画类添加到 div 但动画不运行 - 我不知道为什么?!
为了进一步说明,在单击按钮之前,div 类看起来像这样, 单击按钮之前:
点击按钮后:
window.onload = function() {
document.getElementById("loginButton").onclick = function() {
console.log("clicked");
var frontpage = document.getElementById("frontpageDiv");
frontpage.className += " slideOutLeft";
}
}
.slideOutLeft {
animation: slideOutLeft 1s forwards;
}
@keyframes slideOutLeft {
0% {
left: 0px;
}
100% {
left: -1500px;
}
}
<div class="container" id="frontpageDiv">
<div class="container">
<h1 class="header center green-text">ABOUT</h1>
<div class="row center">
<p class="header col s12 light">Something here</p>
</div>
</div>
<div class="row center padding-bottom-1">
<a class="btn-small green" id="loginButton">login</a>
<a class="btn-small green">apply</a>
</div>
</div>
我对 CSS 和 JavaScript 还很陌生。
最佳答案
1- 为要为其位置设置动画的元素设置相对
位置。
2- 使用 .classList.add("slideOutLeft")
作为添加类名的标准方法。
window.onload = function() {
document.getElementById("loginButton").onclick = function() {
console.log("clicked");
var frontpage = document.getElementById("frontpageDiv");
frontpage.classList.add("slideOutLeft");
}
}
.slideOutLeft {
animation: slideOutLeft 1s forwards;
position:relative;
left:0;
top:0;
}
@keyframes slideOutLeft {
0% {
left: 0px;
}
100% {
left: -1500px;
}
}
<div class="container" id="frontpageDiv">
<div class="container">
<h1 class="header center green-text">ABOUT</h1>
<div class="row center">
<p class="header col s12 light">Something here</p>
</div>
</div>
<div class="row center padding-bottom-1">
<a class="btn-small green" id="loginButton">login</a>
<a class="btn-small green">apply</a>
</div>
</div>
关于javascript - 在 div 上添加自定义动画类不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50133911/