使用 jQuery 设置 CSS 动画迭代次数

Question

我创建了一个名为Bootstrap Notify 的插件。我建议使用Animate.css 来控制通知的动画。有人报告了Glyphicons Pro 的问题，通知会重复 Animate.css 的动画进入和退出动画。我最近注意到这个问题的原因是因为 Animate.css 和 Glyphicons Pro 都使用了一个类似的类，称为animated。

Animate.css 没有设置animation-iteration-count，所以它默认为1，而Glyphicons Pro 将animation-iteration-count 设置为infinite。

我试图强制我的插件将animation-iteration-count 设置为1，这样通知就不会一遍又一遍地重复它的动画。我正在使用 jQuery 来设置通知的 css。

我尝试使用

var css = { 
        animationIterationCount: 1
    }

我也试过

var css = { 
        WebkitAnimationIterationCount : 1,
        animationIterationCount: 1
    }

然后我设置通知 css

$notify.css(css)

但是，如果我检查网站上的通知，我注意到 animation-iteration-count 没有设置。

刚刚发现如果我使用 JavaScript 而不是 jQuery 设置它，它似乎工作得很好。

例如以下作品：

$notify[0].style.WebkitAnimationIterationCount = 1;
$notify[0].style.animationIterationCount = 1;

所以我的问题是，你可以使用 jQuery 设置 animation-iteration-count 吗？如果可以，你如何设置它？

Answer 1

jQuery 需要与 css 属性完全相同的名称。试试这个：

var css = { 
    'animation-iteration-count': 1
}

$notify.css(css)

最好的办法是使用单独的 CSS 文件来覆盖 Glyphicons Pro 规则，而不是使用 javascript。

.glyphicons.animate {
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
}