使用jQuery设置CSS Animation Iteration Count

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
    }

然后我设置了notify 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;
}