Is it possible to set the sequence of animations in the transition-group?

W

WEDLEYM2021-06-04 10:25:36

Vue.js

WEDLEYM, 2021-06-04 10:25:36

Hello, I have such a component, when you click on a message, it will disappear animatedly. But how can I make the height reduction animation start after the transparency animation ends, and not at the same time.

<!DOCTYPE html>
<header>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Anton Anton, 2021-06-04
@WEDLEYM

htmlbook.ru/css/transition-delay
threw fiddle https://jsfiddle.net/1fr9qdov/3/