mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-25 16:57:24 +08:00
fix(ui): 播放列表抽屉关闭动画改用 animationend 替代 setTimeout (M-UI-08)
This commit is contained in:
@@ -16,6 +16,7 @@
|
|||||||
? 'animate__slideInUp'
|
? 'animate__slideInUp'
|
||||||
: 'animate__slideInRight'
|
: 'animate__slideInRight'
|
||||||
]"
|
]"
|
||||||
|
@animationend="onAnimationEnd"
|
||||||
>
|
>
|
||||||
<div class="playlist-panel-header">
|
<div class="playlist-panel-header">
|
||||||
<div class="title">{{ t('player.playBar.playList') }}</div>
|
<div class="title">{{ t('player.playBar.playList') }}</div>
|
||||||
@@ -99,12 +100,8 @@ watch(
|
|||||||
// 如果已经是关闭状态,不需要处理
|
// 如果已经是关闭状态,不需要处理
|
||||||
if (!internalVisible.value) return;
|
if (!internalVisible.value) return;
|
||||||
|
|
||||||
// 开始关闭动画
|
// 开始关闭动画,等 animationend 后再隐藏
|
||||||
closing.value = true;
|
closing.value = true;
|
||||||
// 等待动画完成后再隐藏组件
|
|
||||||
setTimeout(() => {
|
|
||||||
internalVisible.value = false;
|
|
||||||
}, 400); // 动画持续时间
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
@@ -121,6 +118,13 @@ const closePanel = () => {
|
|||||||
show.value = false;
|
show.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 动画结束后隐藏组件
|
||||||
|
const onAnimationEnd = () => {
|
||||||
|
if (closing.value) {
|
||||||
|
internalVisible.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// 清空播放列表
|
// 清空播放列表
|
||||||
const handleClearPlaylist = () => {
|
const handleClearPlaylist = () => {
|
||||||
if (playList.value.length === 0) {
|
if (playList.value.length === 0) {
|
||||||
|
|||||||
Reference in New Issue
Block a user