jquery – CSS转换不烧

前端之家收集整理的这篇文章主要介绍了jquery – CSS转换不烧前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在创建一个DOM元素(一个div),将其添加到DOM中,然后在javascript中快速更改其宽度。这在理论上应该触发一个CSS3转换,但结果是直接从A到B,没有转换。

如果我通过单独的测试点击事件进行宽度更改,那么一切都将按预期方式运行。

这是我的JS和CSS:

JS(jQuery):

var div = $('<div />').addClass('trans').css('width','20px');
$('#container').append(div);
div.css('width','200px');

CSS(只是分钟的mozilla):

.trans {
    -moz-transition-property: all;
    -moz-transition-duration: 5s;
    height: 20px;
    background-color: cyan;
}

我在这里搞砸了,还是“一击一击”,而不是做事情呢?

所有的帮助是非常感激的。

解决方法

一个不依赖于setTimeout的更清洁的方法是在设置之前读取相关的css属性
var div = $('<div />').addClass('trans');
$('#container').append(div);
div.css('width');//add this line
div.css('width','200px');

在这里工作:

http://jsfiddle.net/FYPpt/144/

如Lucero下面的评论所述,这样做是必要的,以强制浏览器计算一个实际值而不是“auto”,“inherit”或类似的值。没有实际的价值,浏览器将不会知道新的值是与之前的变化。

猜你在找的jQuery相关文章