八、播放器内置组件开发---(动画过渡)

本节总览

---

本节代码提交至：chapter8

效果预览：

chapter8--动画.gif

本节主要是在进入歌手详情页后，点击某一首歌曲后的页面--播放页面的代码开发。
包含底部mini播放器的Vuex状态控制显示与掩藏（之前已写好）、播放器页面布局、播放器页面的动画效果。

代码主要更新

---

 liugezhou_music/src/store
 liugezhou_music/src/common/js/config.js
 liugezhou_music/package.json
 liugezhou_music/src/components/music-list/music-list.vue
 liugezhou_music/src/components/player/player.vue
 liugezhou_music/src/App.vue  

本节代码开发知识点及代码思路

---

1.store

上节内容主要介绍了一下Vuex，这节课因为要开始进行播放器内置组件的开发，开始使用Vuex。分析播放器内置组件页面的需求，我们发现有几个变量我们是需要写进全局变量控制中的。

singer:(默认{}):存储歌手数据
playing(默认false)：控制歌曲是否正在播放
fullScreen(默认flase)：控制播放器是否全屏播放
playlist(默认[])：存储播放器播放列表
sequenceList(默认[])：存储播放器顺序播放列表
mode(默认playMode.sequence)：播放器播放方式
currentIndex（默认为-1）：播放歌曲的索引

关于store的代码目录：

store.png

文件中具体代码： 戳这里
这里基本上涵盖了Vuex的大多数内容。

2.player.vue

package.json----create-keyframe-animation

npm install create-keyframe-animation

这里包含全屏的播放器显示以及退出全局播放后的mini播放器的显示。
在经过一些布局后，退出全屏播放器需要加一个中心大图片向nimi播放器图片切换的过渡效果，反之同样，这里主要使用了Vux官方给出的transition动画与上面的相关依赖。
代码实现：

//全屏div使用transition包裹，使用官方的JavaScript钩子函数
<transition name="normal"
                @enter = "enter"
                @after-enter = "afterEnter"
                @leave = "leave"
                @after-leave= "afterLeave"
>
//mini播放器的transition包裹
<transition name="mini">

具体代码实现：戳这里