@WEDLEYM

Возможно ли задать последовательность анимаций в transition-group?

Здравствуйте, у меня есть такой компонент, при нажатии на сообщение - оно анимировано ищезнет. Но как сделать так чтоб анимацыя уменьшения высоты началась после окончания анимации прозрачности, а не одновременно.
<!DOCTYPE html>
<header>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</header>

<body>
  <div id="app">
    <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>
</body>
<style>
  .wrapper {
    width: 100%;
    height: 9vmin;
    overflow: hidden;
  }

  .wrapper__block {
    background: green;
    height: 9vmin;
    width: 100%;
  }

  .msgAnimation-enter-active,
  .msgAnimation-leave-active {
    transition: all 5s;
  }

  .msgAnimation-enter,
  .msgAnimation-leave-to {
    height: 0;
    opacity: 0;
  }
</style>
<script>
  new Vue({
    el: "#app",
    data: {
      messages: [
        { key: 0, msg: "Are u hacker" }
      ],
    }
  })

</script>

</html>
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы