Поэтому я создаю элемент в javascript, и я назначаю ему некоторые атрибуты стиля и добавляю класс к элементу. В моей таблице стилей у меня есть несколько правил для указанного класса, однако правила перехода, которые у меня есть в файле CSS, не применяются к элементу. Есть ли причина, по которой вновь созданный элемент не получает эти правила? В сафари я вижу, что они вычеркнуты розовым. Вот мой код:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Tester</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>
script.js:
window.onload = function() {
var elm = document.createElement("div");
elm.classList.add("testcls");
elm.style.width = "100%";
elm.style.height = "20em";
elm.style.backgroundColor = "red";
document.body.appendChild(elm);
setTimeout(function() {
elm.style.height = "10em";
},1000);
};
style.css:
.testcls {
background-color: green;
-webkit-transition: all 0.5 ease-in-out;
-moz-transition: all 0.5 ease-in-out;
-ms-transition: all 0.5 ease-in-out;
-o-transition: all 0.5 ease-in-out;
transition: all 0.5 ease-in-out;
}
Укажите единицы продолжительности перехода в правилах CSS:
.testcls {
background-color: green;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}