Почему редактирование перехода jquery .css не применяется в сафари, но редактируются изменения .css?

Question

Я пытаюсь использовать jquery для редактирования css элемента, чтобы дать ему случайное время перехода, затем поверните элемент.

Все это прекрасно работает в хроме, но в сафари первая строка редактирования 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)'); 

Почему не первые правки применяются в сафари?

EDIT: Вот пример, чтобы попробовать в сафари, который выдвигает на первый план вопрос: http://jsfiddle.net/ianbutterworth/5fnSF/30/

Answer 1

Проблема решена путем изменения настроек для «всех» переходов, а не просто «преобразования». Проблема заключалась в том, что для «трансформации» необходимы префиксы -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 редактировать стиль атр вашего элемента, а не ваши CSS файлы. Поэтому каждый раз, когда вы вызываете .css(), вы переопределяете свои последние изменения.

Если у вас есть кратные правила использования:

.css ({ "-webkit-переход": rtext, "-moz-перехода": rtext, ..., "преобразование": «rotateY (180deg) "})

, чтобы не отменить свои последние правила.