Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Почему не срабатывает анимация для transform если её добавить с помощью js (https://javascript.ru/forum/dom-window/63954-pochemu-ne-srabatyvaet-animaciya-dlya-transform-esli-ejo-dobavit-s-pomoshhyu-js.html)

Mixeyka 11.07.2016 10:12

Почему не срабатывает анимация для transform если её добавить с помощью js
 
Устал уже везде лазить искать, нигде ответа нет, не могу разобраться почему transform не работает:

var imageShip = document.createElement("img");
    imageShip.src = "изобр_клиссана.jpg";
    myTile.appendChild(изображениеКорабля);
    imageShip.style.transition = "all 2s";
    imageShip.style.transform = "rotate(100deg)";


Картинка то отображается уже повёрнутой, а вот анимация не проигрывается.

Почему так происходит? Как управлять трансформациями css с помощью js?

рони 11.07.2016 10:40

Mixeyka,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  </head>

<body>
<div id="myTile"></div>
<script>
var imageShip = document.createElement("img");
    imageShip.onload = function() {
    imageShip.style.transform = "rotate(100deg)";
}
    imageShip.style.transition = "all 2s";
    myTile.appendChild(imageShip);
    imageShip.src = "http://www.stihi.ru/pics/2016/04/15/31.jpg";
  </script>
</body>
</html>

Mixeyka 11.07.2016 10:52

рони, спасибо. Тоесть для запуска анимации нужен инициатор колбэк?

рони 11.07.2016 10:54

Цитата:

Сообщение от Mixeyka
Тоесть для запуска анимации нужен инициатор колбэк?

нужен размер, а его нет пока картинка не загрузилась.

Mixeyka 11.07.2016 11:16

Ясно, спасибо.


Часовой пояс GMT +3, время: 00:41.