css3 анимация firefox
Столкнулся с проблемой применения css3 анимация в firefox
function setPosition(showWindow) {
if(!self.isOpen)
return;
var coords = getModalCoords();
if(ie8) {
overlay.style.height = document.body.scrollHeight +'px';
win.style.left = coords.left + 'px';
win.style.top = document.body.scrollTop + coords.top + 'px';
return;
}
// выносим блок за пределы окна
win.style.top = -coords.win_height +'px';
win.style.left = coords.left + 'px';
// добавляем класс с css3 анимацией
addClass(win, 'animate');
setTimeout(function() {
win.style.top = coords.top + 'px'; //опускаем блок в центр окна
//не работает анимации изменения top в лисе
}, 0);
};
начал разбираться, вспомнил про урок css анимации в учебники, там с примером в конце такая же хрень в лисе.. не пойму что в лисе не так? |
cyber,
проверьте на ошибки в firefox код ниже
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="animate.js"></script>
<style>img { display: block; cursor: pointer; }</style>
<style>
.growing {
/* все свойства анимируются 3 секунды */
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-ms-transition: all 3s;
}
</style>
</head>
<body>
Кликните картинку для анимации. Расположение элементов при анимации не должно меняться!
<table>
<tr>
<td>Догнать</td>
<td><img onclick="growIn(this)" src="http://ru.lookatcode.com/show/12009072174082658/flyjet.jpg" width="400" height="240" >
</td>
<td>..и перегнать!</td>
</tr>
</table>
<b>В процессе анимации повторные клики на изображение игнорировать.</b>
<script>
function growIn(img) {
var process = arguments.callee;
if (process.busy) return;
process.busy = true;
// переместить изображение в placeholder постоянного размера
var placeholder = document.createElement('div');
placeholder.style.width = img.offsetWidth + 'px';
placeholder.style.height = img.offsetHeight + 'px';
img.parentNode.replaceChild(placeholder, img);
placeholder.appendChild(img);
var height = img.offsetHeight, width = img.offsetWidth;
img.className = '';
img.style.position = 'relative';
img.style.height = "0px";
img.style.width = "0px";
img.style.left = width/2+'px';
img.style.top = height/2+'px';
// откладываем на 0мс, чтобы началась анимация
// иначе изменение свойств IMG не будет замечено
setTimeout(function() {
img.className = 'growing';
img.style.height = height+'px';
img.style.width = width+'px';
img.style.left = img.style.top = "0px";
}, 100);
img.addEventListener('webkitTransitionEnd', done, false);
img.addEventListener('oTransitionEnd', done, false);
img.addEventListener('msTransitionEnd', done, false);
img.addEventListener('transitionend', done, false);
function done(e) {
// будет срабатывать по 1 разу на каждое свойство e.propertyName
if (process.busy) {
alert('ok!');
if(placeholder.parentNode) placeholder.parentNode.replaceChild(img, placeholder);
img.style.position = '';
process.busy = false;
}
}
}
</script>
</body>
</html>
|
рони, хм, увелечение времени для timeout как вариант , я решил по другому вынес в другой метод установку позиции, вот так
this.Show = function() {
//...
win.style.top = -getModalCoords().win_height +'px'; // перенес из функции setPosition
setPosition();
};
function setPosition() {
if(!self.isOpen)
return;
var coords = getModalCoords();
if(ie8) {
overlay.style.height = document.body.scrollHeight +'px';
win.style.left = coords.left + 'px';
win.style.top = document.body.scrollTop + coords.top + 'px';
return;
}
addClass(win, 'animate');
setTimeout(function() {
win.style.left = coords.left + 'px';
win.style.top = coords.top + 'px';
}, 0);
};
|
| Часовой пояс GMT +3, время: 19:12. |