Сообщение от Octane
|
а событие transitionsend поддерживается?
----------------
гугл говорит OTransitionEnd
|
в том дело, что оно не успевает сработать, т.к. конечный стиль стиль применяется до перерисовки.
|
Сообщение от Pavel M.
|
не пойму о чем речь идет?
попробовал в опере пример с сайта mdn
http://jsfiddle.net/RwtHn/5/ хорошо работает
опера 11.61
|
тоже. но это не то совсем. делается переход с помощью JS. полностью. без наводок мыши и кликов.
без примеров кода будет непонятно.
смотрите :
пример № 1. стиль применяется сразу, как стал доступен элемент.
работает только в хроме (!). в мозилле, как и в опере, не успевает.
попробуем поставить таймаут, чтобы применить конечный стиль после перерисовки.
пример № 2. теперь работает и в FF - таймаут помог применить конечные свойства стиля после перерисовки.
конечно, таймаут - гнилое дело. лёгким движением руки он заменяется на requestAnimationFrame :
пример № 3.
но это не работает в опере.
в интернете есть замена этой функции другой, с таймаутом :
function( callback ){
window.setTimeout(callback, 1000 / 60); // 1000/60 == 16.6
};
код взят
отсюда
попробуем использовать его.
пример № 4. и о чудо, он работает в опере!
т.к. меня не интересует то, что стили применены изначально ( в <style> и прописаны человеком ), я введу генерацию стиля.
пример № 5. для удобства проверки сгенерированные правила выводятся в консоль.
для оперы (из-за которой сыр-бор) генерируется такой CSS :
border-radius:50px;
width:50px;
height:50px;
background-color:#c00;
position:absolute;
top:0;
left:0;
*!*
-o-transition:all 1s;
*/!*
и в ней наконец-то всё хорошо! но есть одно "НО" : в FF если открыть последний пример, то скрипт опять применяет стиль до перерисовки. если запустить скрипт, уже открыв ссылку (Click to view), то всё хорошо. но если нажать F5, то при загрузке шарик не анимируется, а уже висит по середине страницы.
в это же время, в опере и хроме всё хорошо!
и ещё одно "НО"... для requestAnimationFrame для оперы ставится таймаут в 16 мсек. в своём скрипте (не в этом) я ставил таймаут в 1мсек - не помогало. Ставил 10мсек - тоже не анимируется. Даже 100мсек не помогало!
И только задержка
в одну секунду (!) помогла опере применить transition к элементу и после назначения конечных css-правил таки проанимировать их изменение.
Чувствуете разницу ? 1000/60 и 1000.
Нужно как-то определить момент перерисовки в опере. Пытаться предугадать его с помощью таймаута - гнилое дело.
