lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-24 16:27:23 +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/list/index.vue
+25 -15
View File
@@ -122,21 +122,23 @@ const formatDetail = computed(() => (detail: any) => {
</div>
</n-layout>
<div class="music-page" v-show="showMusic" :class="musicFullClass">
<i class="iconfont icon-icon_error music-close" @click="closeMusic()"></i>
<div class="music-title">{{ recommendItem?.name }}</div>
<!-- 歌单歌曲列表 -->
<n-layout class="music-list" :native-scrollbar="false">
<div
v-for="(item, index) in listDetail?.playlist.tracks"
:key="item.id"
:class="setAnimationClass('animate__bounceInUp')"
:style="setAnimationDelay(index, 50)"
>
<SongItem :item="formatDetail(item)" />
</div>
</n-layout>
</div>
<transition name="musicPage">
<div class="music-page" v-if="showMusic">
<i class="iconfont icon-icon_error music-close" @click="closeMusic()"></i>
<div class="music-title">{{ recommendItem?.name }}</div>
<!-- 歌单歌曲列表 -->
<n-layout class="music-list" :native-scrollbar="false">
<div
v-for="(item, index) in listDetail?.playlist.tracks"
:key="item.id"
:class="setAnimationClass('animate__bounceInUp')"
:style="setAnimationDelay(index, 50)"
>
<SongItem :item="formatDetail(item)" />
</div>
</n-layout>
</div>
</transition>
</div>
</template>
@@ -145,6 +147,14 @@ const formatDetail = computed(() => (detail: any) => {
position: relative;
}
.musicPage-enter-active {
animation: fadeInUp 0.8s ease-in-out;
}
.musicPage-leave-active {
animation: fadeOutDown 0.8s ease-in-out;
}
.recommend {
width: 100%;
height: 800px;