Задать вопрос
@Soft_touch_plastic

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

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

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

Похожие вопросы