如何在纯javascript中添加animate.css类onclick事件？_Javascript_Animation_Animate.css

如何在纯javascript中添加animate.css类onclick事件？

javascript animation

如何在纯javascript中添加animate.css类onclick事件？,javascript,animation,animate.css,Javascript,Animation,Animate.css,我未能在javascript中使用单击函数。如何在单击事件时添加淡入类？如果可能，使用现代javascript或es6。另外，如何在5秒内删除该类？请建议我不要用JQuery 如果可能，所有单击事件方法函数都将使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css lay

我未能在javascript中使用单击函数。如何在单击事件时添加淡入类？如果可能，使用现代javascript或es6。另外，如何在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中使用单击函数。如何在单击事件时添加淡入类？如果可能的话，使用现代javascript或es6。另外，如何在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>


css布局
#容器{
宽度：400px；
高度：400px；
位置：相对位置；
背景：黄色；
}
#生动活泼{
宽度：50px；
高度：50px；
位置：绝对位置；
背景色：红色；
}
@-webkit关键帧fadeIn{
到{
不透明度：1；
}
}
@关键帧淡入淡出{
到{
不透明度：1；
}
}
.淡入{
-webkit动画：fadeIn.5s轻松前进1步；
动画：fadeIn.5s轻松前进1步；
不透明度：0；
}

点击我

函数动画（）{
var elem=document.getElementById（“动画”）；
}

您可以使用

classList

属性将类添加到DOM元素中。参见

类列表的MDN条目：
然后可以使用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
}