Почему opacity плавно не меняется?

Question

[Roman Chugunov]

Все привет)
У блока заданы св-ва:

display: none;
	opacity: 0;
	will-change: opacity;
	transition: opacity 0.3s;

Через css opacity меняется плавно, а через js нет (блок мгновенно появляется). Почему так происходит?
el.style.cssText = 'display: block; opacity: 1';
или

el.style.cssText = 'will-change: opacity; transition: opacity 0.3s; display: block; opacity: 1';

Никакой разницы.
Я знаю, что можно через цикл. Но это уже слишком... так нельзя. Нужно через назначение 1 св-ву opacity.

Answer 1

[Алексей Скляров]

Скорее всего потому, что у вас не сохраняется первоначальный параметр opacity. То есть у вас есть есть первоначальное значение, вы его заменяете другим (и задаете скорость 0.3с), так это работает на CSS. На JS же, вы просто стираете навсегда первоначальное значение, и заменяете это первоначальное значение своим + то что оно должно идти 0.3s. Поэтому браузеру неоткуда считать первое значение и провести анимацию, так как вы это значение просто убираете.

Comments

[Roman Chugunov]

Т.е. в js мы не изменяем значение св-ва, а перетираем его изначальное значение?? Какого ...
А как тогда именно изменить значение?

[kulaeff]

Указывайте конкретно свойство, которое нужно изменить, то бишь el.style.opacity, а не el.style.cssText.

[Roman Chugunov]

kulaeff, пробовал, результат такое же. Даже если изначально opacity указать inline'о, в атрибуте style="opacity: 0;"

[kulaeff]

Roman Chugunov, аааа, так у вас же указан display: none изначально, потому и не срабатывает. Уже отвечал на подобный вопрос тут Есть такой код: success: function(data) { $('#engine').html(data);} как сделать плавное появление блока?

[Roman Chugunov]

Да нее, display я тоже меняю на block в скрипте, и его в первую очередь, а уже потом opacity

[Roman Chugunov]

Спасибо за ссылку. Хак помог

Answer 2

[svetlov97]

Попробуй через кейфрейм

Answer 3

[one_day]

плавно а js нужно делать через animate