Why does the animation behave differently if there are a lot of elements?

Question

Sass

Hello, I have such a component

<template>
  <div class="messenger" ref="messenger"></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;

  &::v-deep .wrapper {
    * {
      box-sizing: border-box;
    }
    width: 100%;
    transition: height $transition ease;
    height: $height-block;
    margin-top: $height-margin;

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

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

      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",
  methods: {
    setVanishTimeout(el) {
      return setTimeout(() => {
        el.style.opacity = "0";
      }, 10000);
    },
  },
  created() {
    window.authorizationMessage = function(msg) {
      let wrapper = document.createElement("div");
      wrapper.classList.add("wrapper");
      this.$refs.messenger.appendChild(wrapper);

      let wrapper__block = document.createElement("div");
      wrapper__block.classList.add("wrapper__block");
      wrapper__block.innerHTML = msg;
      wrapper.appendChild(wrapper__block);

      let timeout = this.setVanishTimeout(wrapper__block);
      wrapper__block.addEventListener("mouseout", () => {
        timeout = this.setVanishTimeout(wrapper__block);
      });
      wrapper__block.addEventListener("mouseover", () => {
        clearTimeout(timeout);
      });

      wrapper__block.addEventListener("mousedown", () => {
        wrapper__block.style.opacity = "0";
      });

      wrapper__block.addEventListener("transitionend", () => {
        wrapper__block.parentElement.style.height = "0";
        wrapper__block.parentElement.style.margin = "0";
      });

      wrapper.addEventListener("transitionend", (e) => {
        e.target.remove();
      });
    });
  },
};
</script>

To call the console, you need to write
authorizationMessage("myMessage");
If there are up to 5 elements in the container, all the animation is smooth as it should be, but as soon as there are more elements - sharp

Why is this happening