Question

我想在第二次单击一个按钮时重复@keyframne动画，但它只是效果一次。

    <script>
        $(document).ready(function(){
            $('#btn_commit').click(function(){
                $('#div_msg').css({"animation": "social-notices 4s"});
            });
        });
    </script>
    <style>
        @-webkit-keyframes social-notices{
            17% { left: 10px; opacity: 1; }
            83% { left: 10px; opacity: 1; }
            100% { left: 10px; opacity: 0; }
        }

        @keyframes social-notices{
            17% { left: 10px; opacity: 1; }
            83% { left: 10px; opacity: 1; }
            100% { left: 10px; opacity: 0; }
        }

        #div_msg{
            position: absolute;
            width: 300px; 
            height: 40px; 
            background-color: #c91f37; 
            color: #ffffff; 
            border-radius: 4px; 
            transition: 0.2s ease 0s;
            cursor: pointer;
            transition-duration: 0.2s;
            left: -310px;
        }
    </style>

我该如何解决这个问题？

Answer 1

为它添加一个新类，其中类具有此动画计时功能：

.repeat-inf {
  animation-iteration-count: infinite;
}

以这种方式改变你的jQuery：

$(document).ready(function(){
    $('#btn_commit').click(function(){
        $('#div_msg').addClass("repeat-inf");
    });
});

如果该CSS代码不适合您，请使用完整的animation CSS规则，因为大多数浏览器都不支持速记animation-iteration-count。

Answer 2

您可以将display设置为none并将其恢复为之前的模式。

您还可以为动画创建类，然后在单击元素时删除/添加它。

如何在第二次单击按钮时重复@keyframes？

2 个答案: