Почему нет эффекта постепенного появления блока после динамической вставки в него содержимого?

Question

[Влад]

При динамической вставке некого простого шаблона с html-кодом (тэги: <img> и <p>) через innerHTML в <div> с изначальными свойствами visibility: hidden; и transition: visibility 1s ease-out; (созданного не на лету, а прописаного в вёрстке) не работает эффект постепенного появления.

Т.е. я генерю из массива нужный шаблон , вставляю в этот <div> через innerHTML и присваиваю ему visibility: visible. В итоге<div> появляется моментально, а не постепенно в течение 1s. Порядок действий вставки и присвоения свойства на результат не влияют.

Если использовать opacity, та же петрушка.

Кто сталкивался? Как пофиксить?

Comments

[godsplane]

transition

[Максим Тимофеев]

Выкладывай на codepen с opacity должно работать. Видимо причина в чем-то что вы не описали. codepen в студию

[Влад]

Максим Тимофеев, Вот по быстрому сейчас набросал в двух вариантах:

1) JS задаёт блоку свойство
https://codepen.io/vlad-tarasoffka/pen/BaPpRbK

2) ) JS добавляет и удаляет блоку класс
https://codepen.io/vlad-tarasoffka/pen/abjpwvP

P.S. Всех православных с прошедшим праздником

[Максим Тимофеев]

Влад,
вот правки ко второму примеру, как я говорил анимация бюджет работа только для opacity

.message {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 30px;
  background-color: aquamarine;
  box-shadow: 5px 5px 5px #ccc;
  transition: opacity 2s ease-in-out;
}
.message.show {
  visibility: visible;
  opacity: 1;
}

[Влад]

Максим Тимофеев, я понял.. поскольку я использую здесь абсолютное позиционирование, то необходимо манипулировать двумя свойствами. Если изменять только opacity, то кнопка будет недоступно.

Кстати, а почему тогда при закрытии div.message не происходит плавного исчезновения, ведь именно ему присвоено свойство transition: opacity 2s ease-in-out; ?

[Влад]

А.. я догадался.. Надо для всех свойств сделать транзитион
transition: all .8s ease-in-out;