如何在纯 javascript 中添加 animate.css 类 onclick 事件？ [复制]答案

【问题标题】：How can add animate.css class onclick event in pure javascript? [duplicate]如何在纯 javascript 中添加 animate.css 类 onclick 事件？ [复制]
【发布时间】：2018-07-10 07:27:47
【问题描述】：

我未能在 javascript 中使用点击功能。如何添加淡入类点击事件？如果可能的话，使用现代 javascript 或 es6。另外，如何在 5 秒内删除课程？请建议我不要使用 JQuery。

如果可能，所有点击事件方法函数都使用。

我未能在 javascript 中使用点击功能。如何添加淡入类点击事件？如果可能的话，使用现代 javascript 或 es6.Also，如何在 5 秒内删除该类？请建议我不要使用 JQuery。如果可能，所有点击事件方法函数都使用。

    <!DOCTYPE html>
        <html>

        <head>
            <meta charset="utf-8">
            <title>css layout</title>

            <style>
                #container {
                    width: 400px;
                    height: 400px;
                    position: relative;
                    background: yellow;
                }

                #animate {
                    width: 50px;
                    height: 50px;
                    position: absolute;
                    background-color: red;
                }

                @-webkit-keyframes fadeIn {
                    to {
                        opacity: 1;
                    }
                }

                @keyframes fadeIn {
                    to {
                        opacity: 1;
                    }
                }

                .fade-in {
                    -webkit-animation: fadeIn .5s ease-in 1 forwards;
                    animation: fadeIn .5s ease-in 1 forwards;
                    opacity: 0;
                }
            </style>


        </head>

        <body>
        <!--button-->
            <p>
                <button onclick="animations()">Click Me</button>
            </p>

            <div id="container">
                <div id="animate"></div>
            </div>
<!--js-->
            <script>
                function animations() {
                    var elem = document.getElementById("animate");

                }
            </script>
        </body>

        </html>

【问题讨论】：

标签： javascript animation animate.css

【解决方案1】：

您可以使用classList 属性将类添加到DOM 元素。请参阅 classList 的 MDN 条目：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

然后您可以使用 setTimeout 函数删除该类。

所以你的动画函数可能看起来像这样：

function animations() {
  var elem = document.getElementById("animate");

  elem.classList.add('fade-in'); // Add .fade-in class

  setTimeout(function() {
    elem.classList.remove('fade-in'); // Remove .fade-in class
  }, 5000); // 5000ms
}

【讨论】：