title: How to make an animated messenger
body: <p>I want to create a messenger component that, when the function is called, will create a message and, when pressed or by a timer, will at first make it transparent -&gt; after that, smoothly decrease the height of the wrapper -&gt;, and after the end of the transition, delete the object
  How can can I do that
  My code is not working correctly</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="message" id="wrapper"&gt;&lt;/div&gt;
  &lt;/template&gt;
  &lt;style lang="scss"&gt;
  $height-block: 9vmin;
  .message {
    position: absolute;
    z-index: 10;
    right: 1vmin;
    bottom: 1vmin;
    width: 25vmin;
    height: 50vmin;
  
    overflow: hidden;
  
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  
    .wrapper {
      * {
        box-sizing: border-box;
      }
      flex-shrink: 0;
      width: 100%;
      position: relative;
      transition: height 0.5s linear;
      transition: margin 0.5s linear;
      height: $height-block;
  
      padding: 0.5vmin 0;
  
      &amp;__block {
        background: rgba(42, 29, 29, 0.8);
        height: 100%;
        width: 100%;
  
        font-size: 2vmin;
        padding: 1vmin;
        color: white;
  
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.5s linear;
      }
    }
  }
  &lt;/style&gt;
  &lt;script&gt;
  export default {
    name: "Messenger",
  };
  //eslint-disable-next-line no-unused-vars
  window.msg = function msg(msg) {
    let wrapper = document.createElement("div");
    wrapper.classList.add("wrapper");
    document.getElementById("wrapper").appendChild(wrapper);
  
    let wrapper__block = document.createElement("div");
    wrapper__block.classList.add("wrapper__block");
    wrapper.appendChild(wrapper__block);
    wrapper__block.innerHTML = msg;
  
    setTimeout(() =&gt; {
      wrapper__block.style.opacity = "0";
    }, 1000);
    wrapper__block.addEventListener("mousedown", () =&gt; {
      wrapper__block.style.opacity = "0";
    });
  
    wrapper__block.addEventListener("transitionend", () =&gt; {
      wrapper.parentElement.style.height = "0";
      wrapper.parentElement.style.margin = "0";
    });
    wrapper.addEventListener("transitionend", () =&gt; {
      wrapper.remove(wrapper__block);
    });
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>