Javascript-форум - Управление CSS анимацией с помощью JS

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Управление CSS анимацией с помощью JS (https://javascript.ru/forum/dom-window/34982-upravlenie-css-animaciejj-s-pomoshhyu-js.html)

Управление 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,
эмм.. чот я об этом как-то не подумал :) ~~Вот блин, 2 дня убил на это..~~

Но что если мне нужно переместить элемент из координат XX в XY? Естественно, это можно сделать и на JS, но не хочется его нагружать на сайте и без того напичканном разного рода задачами на JS.