Сообщение от poorking
|
|
А это событие везде генерируется где поддерживается transition?
|
в 4 файрфоксе да.
в опере 10.5 это OTransitionEnd
в хроме webkitTransitionEnd
я про него ничего не нашел. попробовал сам.. "тыкнуть"
вот пример
для вебкита, файрфокса и оперы
<img width="100" src="http://javascript.ru/forum/image.php?u=9861&dateline=1303740012" style="border : 3px red solid">
<script>
var img = document.images[0],
// это для хрома
transit = 'WebkitTransition',
transit_event = 'webkitTransitionEnd';
if (typeof img.style.WebkitTransition === 'undefined') {
if (typeof document.body.style.MozTransition === 'undefined') {
if (typeof document.body.style.OTransition === 'undefined')
alert('Не поддерживается');
else {
// меняем для оперы
transit = 'OTransition';
transit_event = 'OTransitionEnd';
}
} else {
// меняем для мозиллы
transit = 'MozTransition';
transit_event = 'transitionend';
}
} // if webkit transition END
// свойство TRANSITION
img.style[transit] = "all 2s ease-in-out"
// после 400 мсек меняем свойства и начинается анимация
setTimeout(function () {
with(img.style) {
width = "300px"
opacity = "0.3";
}
}, 400)
// в конце анимации мутим бесконечную
img.addEventListener(transit_event, function () {
with(img.style) {
width = Math.random() * 150 + 50 + 'px';
opacity = Math.random();
borderWidth = Math.random() * 20 + 10 + 'px';
borderColor = "blue";
}
//img.removeEventListener( transit_event, arguments.callee, false );
}, false)
</script>
все ок, но в мозилле опять этот баг ( т.е. это уже фича такая )
не установил высоту - перехода нет. появляется только потом ( при transitionend. она сразу стартует )
с подчёркнутым все отлично
<img *!*width="100"*/!* src="http://javascript.ru/forum/image.php?u=9861&dateline=1303740012" style="border : 3px red solid">
кстати, заметил еще одно
img.addEventListener(transit_event, function () {
with(img.style) {
width = "100px"
opacity = "0.9";
borderWidth = "10px"
borderColor = "blue";
}
}, false)
тут то по окончанию перехода ( transition ) назначаются новые свойства стилей.
анимация начинает проигрываться опять ! хоть и этого незаметно
...
заметил через файрбаг сейчас.
надо быть внимательней )
UPD :
ВОТ ЭТА ССЫЛКА ответила на все мои вопросы!