Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.01.2013, 00:57
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

Управление 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)";

Последний раз редактировалось (Sandr), 27.01.2013 в 01:40.
Ответить с цитированием
  #2 (permalink)  
Старый 27.01.2013, 05:20
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Как вариант:

<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, 27.01.2013 в 05:24.
Ответить с цитированием
  #3 (permalink)  
Старый 27.01.2013, 23:25
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

danik.js,
да дело не только в велосипедах. Просто хочу разобраться в этом, чтобы ночью нормально спалось))

Ещё есть вариант, вешать обработчик на transitionend. Что насчёт этого думаете?
Ответить с цитированием
  #4 (permalink)  
Старый 28.01.2013, 06:25
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Думаю что это луший вариант. Но чуть сложнее чем setTimeout
Сам если чесно с этим не работал
Ответить с цитированием
  #5 (permalink)  
Старый 28.01.2013, 19:09
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

danik.js,
да, сложнее) Всё никак не разберусь с тем, как обработчик удалять, а то при каждой анимации эти обработчики накапливаются, что не есть хорошо.
Ответить с цитированием
  #6 (permalink)  
Старый 28.01.2013, 19:14
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

(Sandr),
Не проще ли расписать в css по классам и cкриптом: добавлять - отнимать класс
Заодно и динамику в css прописать ?
Ответить с цитированием
  #7 (permalink)  
Старый 28.01.2013, 19:27
Профессор
Отправить личное сообщение для (Sandr) Посмотреть профиль Найти все сообщения от (Sandr)
 
Регистрация: 14.10.2010
Сообщений: 376

Deff,
эмм.. чот я об этом как-то не подумал Вот блин, 2 дня убил на это..

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
подключить css с помощью js Abraham (X)HTML/CSS 5 30.01.2018 00:33
Управление CSS через JS (Sandr) Общие вопросы Javascript 3 16.03.2012 12:22
Управление клипами .mov с помощью js 25mute Элементы интерфейса 1 05.03.2011 09:36
С помощью JS добавить к ссылкам картинку в CSS wlad2 Элементы интерфейса 7 16.10.2010 23:44
Удаление CSS свойста с помощью JS Hurley Internet Explorer 2 01.10.2009 21:55