Форум

Mixeyka · #1 (**permalink**) 11.07.2016, 10:12

Устал уже везде лазить искать, нигде ответа нет, не могу разобраться почему transform не работает:

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

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

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

рони · #2 (**permalink**) 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 · #3 (**permalink**) 11.07.2016, 10:52

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

рони · #4 (**permalink**) 11.07.2016, 10:54

Сообщение от Mixeyka

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

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

Mixeyka · #5 (**permalink**) 11.07.2016, 11:16

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

Форум

Справочник

Discord чат

Курсы javascript