CSS правило перехода по своей сути переопределено при создании элемента в JavaScript?

Question

CSS правило перехода по своей сути переопределено при создании элемента в JavaScript?

0

Поэтому я создаю элемент в 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;
}

DanZimm 30 нояб. 2013, в 10:59

Источник

1

неверное значение свойства для перехода
Anto Jurković 30 нояб. 2013, в 10:09

Теги:

javascript

html

css

transition

css-transitions

1 ответ

Ещё вопросы

неверное значение свойства для перехода

Arie Xiao · Accepted Answer · 2013-11-30T08-31-00.000Z

Укажите единицы продолжительности перехода в правилах 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;
}

демонстрация