@Soft_touch_plastic

Как реализовать плавное смещение элементов наверх при добавлении нового элемента?

Здравствуйте, есть контейнер (flex-direction: column), в который добавляются элементы, задача состоит в том, чтобы добавить анимацию при добавлении нового элемента. Когда он появляется, существующие смещаются выше и на месте последнего появляется новый элемент. Ломаю себе голову, потому что узнать высоту, на которую нужно сместить остальные блоки, можно узнать только после монтирования нового элемента, тоесть это не подходит. Ума не приложу, как скомбинировать transform, чтобы добиться желаемого результата. Может у вас есть идеи?
  • Вопрос задан
  • 343 просмотра
Пригласить эксперта
Ответы на вопрос 3
Fragster
@Fragster
помогло? отметь решением!
Ответ написан
Комментировать
@FKV
Можно смотнитровать элемент со свойством display:none;
Вычислить его высоту с помощью - document.querySelector('.hidden').scrollHeight
Ответ написан
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Здраствуйте! Как то так хотели?

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div class="flex">
       <div></div>
  
   </div>
 
</body>
<button class="btn">ADD</button>
<style>
    .flex{
        display: flex;
        flex-direction: column;
        
    }
    .flex div{
        width: 250px;
      background: mediumpurple;
      filter: drop-shadow(0px 0px 4px mediumpurple);
        height: 250px;
        margin: 15px;
        border-radius:3px;

       
    }
    .styles{
        width: 250px;
      background: mediumpurple;
      filter: drop-shadow(0px 0px 4px mediumpurple);
        height: 250px;
        margin: 15px;
        border-radius:3px;
    }
</style>
<script>
    let btn = document.querySelector('.btn')
  let flex = document.querySelector(".flex")
  btn.onclick = function(){
      let div = document.createElement('div')

      div.classList.add('styles')
      $(div).hide(0)
      flex.append(div)
      $(div).show(400)
  }

</script>
</html>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы