Question

我尝试使用jquery编辑元素的css以给它一个随机的过渡时间，然后旋转元素。

这一切在Chrome中工作得很好，但在safari中，第一行的css编辑没有制作，因此所有转换都以预定义的速度发生。

 var rspeed = (Math.random()/3)+0.6,
    rtext = 'transform ' + rj + 's ease-in-out';

$('#tile').css( '-webkit-transition',rtext).css( '-moz-transition',rtext).css( '-ms-transition',rtext).css( '-o-transition',rtext).css( 'transition',rtext);
$('#tile').css( 'transform','rotateY(180deg)');

为什么没有在Safari中应用的第一个编辑？

编辑：以下是尝试使用safari突出显示问题的示例：http://jsfiddle.net/ianbutterworth/5fnSF/30/

Answer 1

通过更改“所有”转换的设置而不仅仅是“转换”来解决问题。问题是'transform'需要-webkit-等前缀。添加“全部”是最短的选项

var rspeed = (Math.random()/3)+0.6,
    rtext = 'all ' + rj + 's ease-in-out';

$('#tile').css({'transition':rtext,'transform':'rotateY(180deg)'});

Answer 2

JQuery css编辑元素的样式attr而不是CSS文件。因此，每次调用.css（）时，都会覆盖上次更改。

当您使用倍数规则时：

.css（{＆＃34; -webkit-transition＆＃34;：rtext，＆＃34; -moz-transition＆＃34;：rtext，...，＆＃34; transform＆＃34;：＆＃ 34; rotateY（180deg）＆＃34;}）

不要覆盖你的规则。

为什么jquery .css转换编辑没有在safari中应用，但.css转换编辑是？

2 个答案: