Здравствуйте, у меня есть мессенджер, (по интервалу создается тестовое сообщение)
Мессенджер добавляет сообщение без анимации, при нажатии на сообщение - удаляет сообщение, по таймеру удаляет сообщение, таймер может быть обнулен при @mouseenter/ возобновлен при @mouseleave.
Однако так как сообщения удаляются с анимацией, можно ли сделать так чтоб если началась анимация удаления (по таймер или клику, но пользователь хочет его дочитать) после @mouseenter - сообщение не удалилось, а анимация обратно сделала его не прозрачным
Код месенджера
<template>
<div class="messenger">
<transition-group name="msgAnimation" tag="div">
<div
v-for="obj in messages"
:key="obj.key"
class="block"
@click="delMsg(obj)"
@mouseenter="delMsgTimeout(obj)"
@mouseleave="addMsgTimeout(obj)"
>
<div class="wrapper">
<div class="text">{{ obj.msg }}</div>
</div>
</div>
</transition-group>
</div>
</template>
<script>
export default {
name: "Messenger",
data() {
return {
messages: [],
i: 0,
};
},
methods: {
delMsg(el) {
const i = this.messages.indexOf(el);
if (i !== -1) {
this.delMsgTimeout(el);
this.messages.splice(i, 1);
}
},
addMsgTimeout(el) {
el.timeout = setTimeout(() => {
this.delMsg(el);
}, 10000);
console.log("addMsgTimeout");
},
delMsgTimeout(el) {
clearTimeout(el.timeout);
el.timeout = null;
},
},
mounted() {
window.authorizationMessage = function (msg) {
const obj = { key: ++this.i, msg: msg, timeout: undefined };
this.messages.push(obj);
this.addMsgTimeout(obj);
}.bind(this);
setInterval(
function () {
window.authorizationMessage(this.i);
}.bind(this),
2500
);
window.authorizationMessage(
"Британия готовится к полной отмене антивирусных ограничений, во Франции начнут пускать в бары и кинотеатры только со справками, а в США предупреждают о новых побочных эффектах одной из вакцин. Главное о коронавирусе на сегодня."
);
},
};
</script>
<style lang="scss" scoped>
.msgAnimation-leave-active {
transition: all 2s;
}
.messenger {
position: absolute;
right: 1vmin;
bottom: 1vmin;
width: 25vmin;
height: 50vmin;
overflow-x: hidden;
overflow-y: auto;
$scroll-width: 1vmin;
&::-webkit-scrollbar {
width: $scroll-width;
height: 100%;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background: white;
border-radius: $scroll-width / 2;
}
display: flex;
flex-direction: column-reverse;
$background: linear-gradient(
rgba(46, 21, 21, 0.432),
rgba(87, 27, 27, 0.486)
);
$color: white;
.block {
background: $background;
color: $color;
height: 9vmin;
font-size: 2vmin;
box-sizing: border-box;
width: 100%;
margin-top: 1.1vmin;
word-wrap: break-word;
display: flex;
justify-content: center;
align-items: center;
.wrapper {
max-height: 100%;
overflow-x: hidden;
overflow-y: auto;
$scroll-width: 0.5vmin;
&::-webkit-scrollbar {
width: $scroll-width;
height: 100%;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(42, 29, 29, 0.95);
border-radius: $scroll-width / 2;
}
.text {
margin: 1vmin;
}
}
&:first-child {
margin-top: 0;
}
}
}
.msgAnimation-leave-to {
opacity: 0;
}
</style>
Средний
