github-repos/blivechat
1
0
Fork 0
mirror of https://github.com/xfgryujk/blivechat.git synced 2025-03-23 08:10:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

添加SC固定栏过渡

Browse Source
This commit is contained in:
John Smith 2021-02-12 17:25:49 +08:00
parent b395886535
commit c19e7692d4
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/ChatRenderer/Ticker.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<yt-live-chat-ticker-renderer :hidden="showMessages.length === 0"> <yt-live-chat-ticker-renderer :hidden="showMessages.length === 0">
<div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-renderer"> <div id="container" dir="ltr" class="style-scope yt-live-chat-ticker-renderer">
<div id="items" class="style-scope yt-live-chat-ticker-renderer"> <transition-group tag="div" :css="false" @enter="onTickerItemEnter" @leave="onTickerItemLeave"
id="items" class="style-scope yt-live-chat-ticker-renderer"
>
<yt-live-chat-ticker-paid-message-item-renderer v-for="message in showMessages" :key="message.raw.id" <yt-live-chat-ticker-paid-message-item-renderer v-for="message in showMessages" :key="message.raw.id"
tabindex="0" class="style-scope yt-live-chat-ticker-renderer" style="overflow: hidden;" tabindex="0" class="style-scope yt-live-chat-ticker-renderer" style="overflow: hidden;"
@click="onItemClick(message.raw)" @click="onItemClick(message.raw)"
@ -19,7 +21,7 @@
</div> </div>
</div> </div>
</yt-live-chat-ticker-paid-message-item-renderer> </yt-live-chat-ticker-paid-message-item-renderer>
</div> </transition-group>
</div> </div>
<template v-if="pinnedMessage"> <template v-if="pinnedMessage">
<membership-item :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER" <membership-item :key="pinnedMessage.id" v-if="pinnedMessage.type === MESSAGE_TYPE_MEMBER"
@ -98,6 +100,27 @@ export default {
window.clearInterval(this.updateTimerId) window.clearInterval(this.updateTimerId)
}, },
methods: { methods: {
async onTickerItemEnter(el, done) {
let width = el.clientWidth
el.style.width = 0
await this.$nextTick()
el.style.width = `${width}px`
window.setTimeout(done, 200)
},
onTickerItemLeave(el, done) {
el.classList.add('sliding-down')
window.setTimeout(() => {
el.classList.add('collapsing')
el.style.width = 0
window.setTimeout(() => {
el.classList.remove('sliding-down')
el.classList.remove('collapsing')
el.style.width = 'auto'
done()
}, 200)
}, 200)
},
getShowAuthorName: constants.getShowAuthorName, getShowAuthorName: constants.getShowAuthorName,
needToShow(message) { needToShow(message) {
let pinTime = this.getPinTime(message) let pinTime = this.getPinTime(message)