Как реализовать падение элементов при удалении элемента(-ов)?

Question

[wipe0009]

Как я могу реализовать что-то как на картинке, то есть чтоб элементы плавно падали, если какой-то элемент удален? К сожалению, вариант уменьшать height удаляемого элемента приводит к не плавной анимации (тоесть это не похоже на свободное падение как в реальности) если удаляются несколько элементов одновременно.

Могу ли я попросить пример пожалуйста - какой подход выбрать для реализации?

Comments

[Vitaliy]

нужен живой пример реализации, так как с уменьшением height должно быть все гладко (если конечно никакие margin не мешают)

[wipe0009]

Ну ето работает, но если нажать не несколько кнопок которые будут уменшать высоту - ето будет не очень плавно - вить скорость падения будет увеличиватся...

[wipe0009]

Пример кода компонента
через высоту

<template>
  <div class="messenger">
    <transition-group name="msgAnimation" tag="div">
      <div v-for="(obj, i) in messages" :key="obj.key" class="wrapper">
        <div class="wrapper__block" @click="messages.splice(i, 1)">
          {{ obj.msg }}
        </div>
      </div>
    </transition-group>
  </div>
</template>
<style lang="scss" scoped>
$height-block: 9vmin;
$height-margin: 1vmin;
$transition: 0.5s;
$scroll-width: 0.5vmin;

.messenger {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  .wrapper {
    * {
      box-sizing: border-box;
    }
    width: 100%;
    height: $height-block + $height-margin;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;

    &__block {
      background: rgba(42, 29, 29, 0.8);
      height: $height-block;
      width: 100%;
      overflow: hidden;
      margin-top: $height-margin;

      font-size: 2vmin;
      padding: $height-margin;
      color: white;

      display: flex;
      align-items: center;
      justify-content: center;

      overflow-x: hidden;
      overflow-y: auto;

      //word-wrap: break-word;
      word-break: break-all;
      flex-wrap: wrap;

      &::-webkit-scrollbar {
        width: $scroll-width;
        height: 100%;
      }
      &::-webkit-scrollbar-thumb {
        background: #e93535;
        border-radius: $scroll-width / 2;
      }
    }
  }

  .msgAnimation-enter,
  .msgAnimation-leave-to {
    animation: anim $transition * 2 linear;

    @keyframes anim {
      0% {
      }
      50% {
        opacity: 0;
        height: $height-block + $height-margin;
      }
      100% {
        opacity: 0;
        height: 0;
      }
    }
  }
}
</style>
<script>
export default {
  name: "Messenger",
  data() {
    return {
      totalAmount: 0,
      messages: [{ key: 0, msg: "Are u hacker" }],
    };
  },

  created() {
    
window.authorizationMessage = 
      function (msg) {
        this.totalAmount++;
        this.messages.push({ key: this.totalAmount, msg: msg });
      }.bind(this)
    

};
</script>

для добавления нескольких блоков нужно вызвать authorizationMessage("msg");

[Aetae]

Навскидку - сделать стек удаляемых элементов: по клику ставить класс с исчезновением и добавлять в стек, если последний в стеке запускать сжатие высоты...

[wipe0009]

Aetae, Спасибо, а можно ли придумать чтото типа выставления каждому елементу top относительно его индекса, и когда индекс уменьшелся то поставиь всем елементам top по ниже... или такая реализацыя будет подвисать если елементов много...
Я так понимаю реализовать ето через transition-group не получится раз top опсывается по скрипту...