javascript - 在 div 上添加自定义动画类不起作用？

Question

我制作了一个自定义动画，在单击按钮时将其添加到 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 还很陌生。

Answer 1

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>