[fori]

Здравствуйте, этот код компонента анимирует переходы создания/удаления сообщения, однако как я могу сделать так чтоб сначала становился прозрачным елемент wrapper__block и только после етого уменшался в высоту до 0 wrapper
Можно ли это реализовать на transition-group или это плохой подход...

<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;

.msgAnimation-enter-active,
.msgAnimation-leave-active {
  transition: all 25s;
}
.msgAnimation-enter,
.msgAnimation-leave-to {
  //opacity: 0;
  //height: 0;
}

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

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

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

      font-size: 2vmin;
      padding: $height-margin;
      color: white;
      //transition: opacity $transition ease;

      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;
      }
    }
  }
}
</style>
<script>
export default {
  name: "Messenger",
  data() {
    return {
      totalAmount: 0,
      messages: [{ key: 0, msg: "Are u hacker" }],
    };
  },

  created() {
    global.context.authorization.$on(
      "authorizationMessage",
      function (msg) {
        this.totalAmount++;
        this.messages.push({ key: this.totalAmount, msg: msg });
      }.bind(this)
    );
  },
};
</script>