@Soft_touch_plastic

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

Здравствуйте, есть контейнер (flex-direction: column), в который добавляются элементы, задача состоит в том, чтобы добавить анимацию при добавлении нового элемента. Когда он появляется, существующие смещаются выше и на месте последнего появляется новый элемент. Ломаю себе голову, потому что узнать высоту, на которую нужно сместить остальные блоки, можно узнать только после монтирования нового элемента, тоесть это не подходит. Ума не приложу, как скомбинировать transform, чтобы добиться желаемого результата. Может у вас есть идеи?
  • Вопрос задан
  • 365 просмотров
Пригласить эксперта
Ответы на вопрос 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
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
19 июн. 2024, в 01:11
7000 руб./за проект
18 июн. 2024, в 23:10
15000 руб./за проект