Здравствуйте, у меня есть такой компонент, при нажатии на сообщение - оно анимировано ищезнет. Но как сделать так чтоб анимацыя уменьшения высоты началась после окончания анимации прозрачности, а не одновременно.
<!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>
