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

为要为其位置设置动画的元素设置relative位置。

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>

Answer 2

试试这个：https://jsfiddle.net/swsw9kk5/

将脚本添加到块中html的底部，然后删除window.onload，因为现在不需要。另外，将position: relative添加到容器中。

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

2 个答案: