向元素添加类以在 Javascript 中运行 CSS 动画答案

【问题标题】：Adding a class to an element to run CSS animation in Javascript向元素添加类以在 Javascript 中运行 CSS 动画
【发布时间】：2020-07-29 05:56:48
【问题描述】：

当由 js 代码触发时，我正在尝试将我的 CSS 动画类添加到元素中。 JS：

 if (document.getElementById("user").value == "test"
   && document.getElementById("pass").value == "test")
    {
        alert( "Welcome back!" );
    }
    else {
        document.getElementById("fail").className += "animation";
    }

当 onclick 事件监听器被触发时，动画不会播放。语句的“if”部分正常工作，但“else”部分不会运行。

CSS：

.animation {
    animation: shake 1s;

}

@keyframes shake {


      25% { transform: translate(10px)}
      50% { transform: translate(-10px)}
      75% { transform: translate(10px)}
      100% { transform: translate(-10px)}


}

相关 HTML：

                        <!--LOGIN-->

                    <div id="fail">

                        <p>My Account</p>

                        <p id="note">Username must be between 6 and 10 characters. <br/>Password must be at least 5 characters contain at least one letter and number.</p>
                        <form id="login">

                            <input type="text" placeholder="Username" id="user"/>

                            <br/>

                            <input type="password" placeholder="Password" id="pass"/>

                            <br/>

                            <input onclick="login()" type="submit" value="Submit">
                        </form>

                    </div>

【问题讨论】：

嗨，你在元素中是否已经有其他类 fail
不，fail 只使用一次。这是我在 div 中的 id。
你能显示你的 div 有 id fail。请准确地粘贴你在你的代码中的内容。
刚刚更新了代码
@گوروسینی 刚刚更新了代码

标签： javascript html css class animation

【解决方案1】：

您需要在添加 CSS 类之前定义 load 和 click 事件。

用下一个代码试试，请提供反馈。

<script>
  addEventListener("load", eventClick);

  function eventClick() {
    document.getElementById("user").addEventListener("click", addClass);
  };

  function addClass() {
    var e = document.getElementById("user");
    e.classList.add("animation");
  };
</script>

【讨论】：

【解决方案2】：

您可能会将您的脚本放入您的登录功能中，该功能会在单击后立即提交表单并重新加载页面。试试这个脚本...

document.getElementById("login").addEventListener("submit", function (e) {
  e.preventDefault();
  if (
    document.getElementById("user").value == "test" &&
    document.getElementById("pass").value == "test"
  ) {
    alert("Welcome back!");
  } else {
    document.getElementById("fail").className += "animation";
  }
});

【讨论】：

【解决方案3】：

更改提交输入属性 type = button。

submit 会发起请求并刷新页面，动画将看不到。

【讨论】：