CSS转换不会被解雇

Question

我正在创建一个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;
}

我搞砸了这里,还是"一气呵成"并不是应该做的事情？

所有帮助都非常感谢.

Answer 1

不依赖于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在下面的评论中所解释的那样,这样做是必要的,以迫使浏览器计算实际值而不是"自动","继承"或类似.如果没有实际值,浏览器将不会知道新值是否与以前相比有所变化.

Answer 2

这有两种方法可以做到这一点.

1 - CSS转换

通过使用setTimeout该addClass方法将运行而不是与前面的脚本一起运行,以便transition事件将触发

示例jsfiddle

jQuery的:

var div = $('<div class="trans" />');
$('#container').append(div);
// set the class change to run 1ms after adding the div
setTimeout(function() {div.addClass('wide')}, 1); 

CSS:

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
    -webkit-transition: all 5s ease;
       -moz-transition: all 5s ease;
        -ie-transition: all 5s ease;
         -o-transition: all 5s ease;
            transition: all 5s ease;
}
.wide {
    width: 200px;
}

2 - jQuery的.animate()功能

示例jsfiddle

jQuery的:

var div = $('<div class="trans" />');
$('#container').append(div);
div.animate({'width': '200px'}, 5000); // 5 sec animation

CSS:

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
}

Answer 3

尝试调用jQuery的.offset()方法.

当浏览器获得偏移量时,它会触发回流/重绘/布局事件,从而允许转换工作.

看到这个小提琴:http://jsfiddle.net/FYPpt/199/

另见 - http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html