lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-05-18 11:37:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改动画, 修改搜索

Browse Source
This commit is contained in:
algerkong
2021-11-09 11:34:09 +08:00
parent 12053b780d
commit efc7985602
11 changed files with 325 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/user/index.vue
+24 -16
View File
@@ -133,26 +133,34 @@ const musicFullClass = computed(() => {
</div>
</n-layout>
</div>
<div class="music-page" v-show="isShowList" :class="musicFullClass">
<i class="iconfont icon-icon_error music-close" @click="isShowList = false"></i>
<div class="music-title">{{ list?.name }}</div>
<!-- 歌单歌曲列表 -->
<n-layout class="music-list" :native-scrollbar="false">
<div
v-for="(item, index) in list?.tracks"
:key="item.id"
:class="setAnimationClass('animate__bounceInUp')"
:style="setAnimationDelay(index, 100)"
>
<SongItem :item="formatDetail(item)" />
</div>
</n-layout>
</div>
<transition name="musicPage">
<div class="music-page" v-if="isShowList">
<i class="iconfont icon-icon_error music-close" @click="isShowList = false"></i>
<div class="music-title">{{ list?.name }}</div>
<!-- 歌单歌曲列表 -->
<n-layout class="music-list" :native-scrollbar="false">
<div
v-for="(item, index) in list?.tracks"
:key="item.id"
:class="setAnimationClass('animate__bounceInUp')"
:style="setAnimationDelay(index, 100)"
>
<SongItem :item="formatDetail(item)" />
</div>
</n-layout>
</div>
</transition>
</div>
</template>
<style lang="scss" scoped>
.musicPage-enter-active {
animation: fadeInUp 0.8s ease-in-out;
}
.musicPage-leave-active {
animation: fadeOutDown 0.8s ease-in-out;
}
.user-page {
@apply flex;
.left {