Блог

Главная - Вопросы по программированию - Как сделать анимированный мессенджер

Как сделать анимированный мессенджер

#javascript #vue.js #dom #css-animations

Вопрос:

Я хочу создать компонент messenger, который при вызове функции создаст сообщение и при нажатии или по таймеру сначала сделает его прозрачным -> после этого плавно уменьшит высоту оболочки ->>, а после окончания перехода удалит объект Как я могу сделать так, чтобы мой код работал неправильно

 <template>
  <div class="message" id="wrapper"></div>
</template>
<style lang="scss">
$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;
    }
  }
}
</style>
<script>
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(() => {
    wrapper__block.style.opacity = "0";
  }, 1000);
  wrapper__block.addEventListener("mousedown", () => {
    wrapper__block.style.opacity = "0";
  });

  wrapper__block.addEventListener("transitionend", () => {
    wrapper.parentElement.style.height = "0";
    wrapper.parentElement.style.margin = "0";
  });
  wrapper.addEventListener("transitionend", () => {
    wrapper.remove(wrapper__block);
  });
};
</script>

Комментарии:

1. Вы можете начать с написания правильного кода Vue. В противном случае вообще нет смысла использовать фреймворк.

Метки: