Скрывающиеся/показывающие блоки

360

02 января 2018, 13:51

Имеем скрытый блок у которого прописаны стили:

opacity: 0;
visibility: hidden;
padding: 0;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;

Показывается блок методом добавления класса со стилями:

opacity: 1;
visibility: visible;
padding: 20px 0;

Проблема в том, что таким образом реализуется некое подергивание в момент появления блока. Что меня в первую очередь интересует: как задать даже невидимому блоку и его контенту нулевую высоту? И плавно ее увеличивать при появлении.

Answer 1

Значение opacity можно менять плавно, делая тем самым разные эффекты. visibility нельзя. Пример:

<div>  
</div>
@keyframes extinction {
  0% {
    opacity: 0;
    height: 0;
  }
  100% {
     opacity: 1;
     height: 100px;
  }
}
div {
  width: 200px;
  background-color: #BAB9E6;
  animation-name: extinction;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}