jquery - 使用 jQuery 获取 css 动画属性

Question

我已经用 CSS 定义了一个动画，它首先将一个带有 jQ​​uery 的类添加到定义的元素中，如下例所示：

jQuery（我在 Firefox 中测试）：

$(document).on('click', 'h1 > span:first-child', function(event) {
    $(this).addClass('animate');
    console.log($('h1 > span.animate').length);   // 1 (Element exists)
    console.log($('h1 > span.animate').css('animation')); // Empty string
    console.log($('h1 > span.animate').css('-moz-animation')); // Empty string
    console.log($('h1 > span.animate').css('-webkit-animation')); // undefined of course ;) 
});

CSS动画（工作正常）

// The animation testen was defined before an is working an assign class to span element
body h1 span.animate {
  -webkit-animation: testen 5s 1;
  -moz-animation: testen 5s 1;
  -ms-animation: testen 5s 1;
  -o-animation: testen 5s 1;
  animation: testen 5s 1;
}

我总是得到一个空字符串而不是这样的可能是什么原因？

animation: testen 5s 1;

提前致谢

Answer 1

您需要直接访问这些值而不是捆绑包：

$(document).on('click', 'h1 > span:first-child', function(event) {
    $(this).addClass('animate');
    console.log($('h1 > span.animate').length);   // 1 (Element exists)
    console.log($('h1 > span.animate').css('animation-duration')); // 5s
    console.log($('h1 > span.animate').css('-moz-animation-duration')); // 5s
    console.log($('h1 > span.animate').css('-webkit-animation-duration')); // 5s
});

DEMO