问

CSS动画不会在jQuery中的addClass上触发

倾城修罗__598 发布于 2023-02-06 13:30

jquery

我有一个非常奇怪的问题.我在jQuery中加载来自JSON的文章,当它们加载时,我想为每个动态元素添加一个"animate"类.

$.each(jsonArticles, function (i, article) {

    var $articleHTML = $(
    '' +
        '' +
        '' + article.reviewTitle + '' +
        '' + article.reviewSummary + '' +
    '');

    $articles
        .append($articleHTML)
            .find("article")
                .addClass("animate");

});

所有这些都很有效,并且在Firebug中检查显示该类已成功添加到每个文章标记中.

但是,当尝试在文章中为添加的类使用CSS转换时,它不会设置动画,而是直接跳到最终样式(不透明度:1).

.article { 

opacity: 0;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

}

.article.animate { 

    opacity: 1;

}

动画没有发生,但是添加了类并且文章成功设置为不透明度:1.它立即显示.

有人对此有什么想法吗？我完全无法理解这一点.

在另一点,这是相当有趣的...如果我改变.animate类有一个:hover,那么文章将不会显示,直到我悬停和动画确实有效.为什么它适用于悬停而不是立即添加它,对我来说似乎很奇怪.

.article.animate:hover { 

    opacity: 1;

}

我很感激任何意见.

谢谢,Mikey.

现场演示: http ://jsfiddle.net/Pz5CD/ 请注意文章是如何以100%不透明度弹出的.没有看到动画.

2 个回答

更新:

事实证明,OP希望按顺序淡入每个元素,这超出了原始问题的范围.我会在这里留下我的答案作为原始问题的答案.

CSS动画不会在jQuery中的addClass上触发

问题是你的新html被添加到页面中,并且在animate应用该html的css之前添加了类.为了提高效率,浏览器会像这样跳过.例如,如果您添加了一个类,然后将其删除,并重复该过程一百次,则不会产生视觉差异.它会跳过结果.因此,您必须强制重新绘制元素,以便在添加类之前应用所有先前的样式.我写了一个函数来处理这个问题,它应该适用于每个浏览器的每个环境,尽管没有办法保证reDraw的行为.它可能会一直有效,而且很高兴!

现场演示(点击).你可以通过评论它并离开它来告诉reDraw正在发挥作用addClass().
```
$('body').append($articleHTML);
$a = $('body').find("article");
reDraw($a).then(function() {
  $a.addClass("animate");
});

function reDraw($element) {
  var deferred = new $.Deferred();
  setTimeout(function() {
    var h = $element[0].offsetHeight;
    var s = $element[0].getComputedStyle;
    deferred.resolve();
  },0);
  return deferred.promise();
}
```
强制重绘的最佳方法是访问元素offsetHeight或getComputedStyle元素.但是,有些情况下,某些移动设备上的重绘失败了.为了重新添加一些额外的鼓励,我还添加了一个setTimeout.即使超时时间为0也会有效,但它会抛出调用堆栈,所以我使用一个promise来确保重绘后会发生下一个操作(添加类).这只是意味着你将使用我上面演示的语法来添加类 - redraw($element).then(function() { //your code

为了好玩,我做了一个关于使用和不使用reDraw来翻转类的演示.http://jsbin.com/EjArIrik/1/edit
2023-02-06 13:34 回答

greybt
在将元素呈现给dom之后,需要将该类添加到元素中,set timout可能有效
```
setTimeout(function(){
    $articleHTML.addClass("animate");
}, i * 500 );
```
http://jsfiddle.net/Pz5CD/1/
2023-02-06 13:34 回答

mobiledu2502925241

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签

CSS动画不会在jQuery中的addClass上触发

' + article.reviewTitle + '

更新:

CSS动画不会在jQuery中的addClass上触发