Управление CSS анимацией с помощью JS
Приветствую всех.
Есть код
<html>
<head>
<title></title>
<script>
function rotate() {
var src = document.getElementById('rotate');
src.MozTransition = "all 1s";
src.WebkitTransition = "all 1s";
src.OTransition = "all 1s";
src.MsTransition = "all 1s";
src.Transition = "all 1s";
src.MozTransform = "rotate(360deg)";
src.WebkitTransform = "rotate(360deg)";
src.OTransform = "rotate(360deg)";
src.MsTransform = "rotate(360deg)";
src.Transform = "rotate(360deg)";
}
</script>
</head>
<body>
<div id="rotate" style="background-color:black; color:white; width:300px; height:200px">
TEXT_TEXT_TEXT
</div>
<a onclick="rotate(); return false;">Click</a>
</body>
</html>
Тут видно, что после нажатия на ссылку, запускается функция rotate() и див с текстом поворачивается. Проблема в том, что если нажать ещё раз, то див больше не повернётся. Подскажите, как это можно исправить? И ещё вопрос, как можно сократить эту часть кода? src.MozTransition = "all 1s"; src.WebkitTransition = "all 1s"; src.OTransition = "all 1s"; src.MsTransition = "all 1s"; src.Transition = "all 1s"; src.MozTransform = "rotate(360deg)"; src.WebkitTransform = "rotate(360deg)"; src.OTransform = "rotate(360deg)"; src.MsTransform = "rotate(360deg)"; src.Transform = "rotate(360deg)"; |
Как вариант:
<html>
<head>
<title></title>
<script>
function setElementStyle(element, property, value) {
var prefixes = {'webkit':1, 'moz':1, 'ms':1, 'o':1};
if (element.style[property] !== undefined) {
element.style[property] = value;
return;
}
property = property.charAt(0).toUpperCase() + property.substring(1);
for (var prefix in prefixes) {
if (element.style[prefix + property] !== undefined) {
element.style[prefix + property] = value;
break;
}
}
}
function rotate() {
var src = document.getElementById('rotate');
setElementStyle(src, 'transition', "all 1s");
setElementStyle(src, 'transform', "rotate(360deg)");
setTimeout(function(){
setElementStyle(src, 'transition', "");
setElementStyle(src, 'transform', "");
}, 1000);
}
</script>
</head>
<body>
<div id="rotate" style="background-color:black; color:white; width:300px; height:200px">
TEXT_TEXT_TEXT
</div>
<a onclick="rotate(); return false;">Click</a>
</body>
</html>
Но это не очень хороший вариант. Вообще, если кода писать много - лучше использовать готовую библиотеку, а не велосипедить. |
danik.js,
да дело не только в велосипедах. Просто хочу разобраться в этом, чтобы ночью нормально спалось)) Ещё есть вариант, вешать обработчик на transitionend. Что насчёт этого думаете? |
Думаю что это луший вариант. Но чуть сложнее чем setTimeout :)
Сам если чесно с этим не работал |
danik.js,
да, сложнее) Всё никак не разберусь с тем, как обработчик удалять, а то при каждой анимации эти обработчики накапливаются, что не есть хорошо. |
(Sandr),
Не проще ли расписать в css по классам и cкриптом: добавлять - отнимать класс Заодно и динамику в css прописать ? |
Deff,
эмм.. чот я об этом как-то не подумал :) Но что если мне нужно переместить элемент из координат XX в XY? Естественно, это можно сделать и на JS, но не хочется его нагружать на сайте и без того напичканном разного рода задачами на JS. |
| Часовой пояс GMT +3, время: 05:35. |