Здравствуйте, этот код компонента анимирует переходы создания/удаления сообщения, однако как я могу сделать так чтоб сначала становился прозрачным елемент wrapper__block и только после етого уменшался в высоту до 0 wrapper
Можно ли это реализовать на transition-group или это плохой подход...
<template>
<div class="messenger">
<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>
</template>
<style lang="scss" scoped>
$height-block: 9vmin;
$height-margin: 1vmin;
$transition: 0.5s;
$scroll-width: 0.5vmin;
.msgAnimation-enter-active,
.msgAnimation-leave-active {
transition: all 25s;
}
.msgAnimation-enter,
.msgAnimation-leave-to {
//opacity: 0;
//height: 0;
}
.messenger {
display: flex;
flex-direction: column;
justify-content: flex-end;
.wrapper {
* {
box-sizing: border-box;
}
width: 100%;
height: $height-block;
margin-top: $height-margin;
&__block {
background: rgba(42, 29, 29, 0.8);
height: $height-block;
width: 100%;
font-size: 2vmin;
padding: $height-margin;
color: white;
//transition: opacity $transition ease;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
overflow-y: auto;
//word-wrap: break-word;
word-break: break-all;
flex-wrap: wrap;
&::-webkit-scrollbar {
width: $scroll-width;
height: 100%;
}
&::-webkit-scrollbar-thumb {
background: #e93535;
border-radius: $scroll-width / 2;
}
}
}
}
</style>
<script>
export default {
name: "Messenger",
data() {
return {
totalAmount: 0,
messages: [{ key: 0, msg: "Are u hacker" }],
};
},
created() {
global.context.authorization.$on(
"authorizationMessage",
function (msg) {
this.totalAmount++;
this.messages.push({ key: this.totalAmount, msg: msg });
}.bind(this)
);
},
};
</script>
