Блог

Один быстрый вопрос.
Если я установлю для div значение display: none , следующие элементы в DOM будут отображаться на том месте, где был div.
Как я могу анимировать этот переход, чтобы он просто плавно перемещался вверх?

Спасибо заранее за каждую помощь!

Вы не можете. Вместо отображения: нет; сделайте его с высотой: 0; и переходом: высота .5s; переполнение: скрыто;

Тогда вам придется немного переместить другие разделы рядом с другими. 🙂

Если вы хотите, я могу создать простой codepen.

Используйте slideUp() вместо hide(); , если вы используете jquery

 $('.hidden').slideUp();
  

Просто анимируйте это. У jQuery есть много способов сделать это, например:

 $('#myDiv').hide(200); // 200ms
  

Чтобы избежать сохранения скрытого элемента с шириной, которая может мешать другим элементам на странице, вы должны просто:

 $('yourElement').slideUp();
  

Таким образом, вы заставите yourElement высоту анимироваться и, наконец, спрячете ее, фактически удалив из потока элементов.

Редактировать: Спасибо A. Wolff за комментарий. После .hide() удалена ненужная .slideUp() функция.

Есть даже лучшее решение для вас. Вы можете показывать и скрывать синюю рамку при каждом нажатии на розовую рамку.

 $('.pinkBox').click(function() {
  $('.pinkBox').addClass('show');
  $('.blueBox').addClass('displayed');
});

$('.blueBox').click(function() {
  $('.pinkBox').removeClass('show');
    setTimeout(function() {
        $('.blueBox').removeClass('displayed');
    }, 300);
});  

 .blueBox {
  height: 100px;
  width: 100px;
  background-color: blue;
  transition: all .3s ease;
  position: absolute;
  display: none;
}
.pinkBox {
  height: 100px;
  width: 100px;
  background-color: pink;
  transition: all .3s ease;
  position: absolute;
}
.show {
  transform: translateY(100px);
}
.displayed {
  display: block;
}  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='blueBox'>
</div>

<div class='pinkBox'>
</div>