播放器切换状态,fullScreen的值设置和取值都可以实现,但是播放器的状态切换是失败,老师可以提供一个思路?

来源:1-1 导学

行云流水justdoit

2017-08-06

<p v-show="fullScreen">testfullScreen的值:{{fullScreen}}</p>
<transition name="normal"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
>
<div class="normal-player" v-show="fullScreen" >
<div class="background">
<img width="100%" height="100%" :src="currentSong.image">
</div>
<div class="top">
<div class="back" @click="back">
<i class="icon-back"></i>
</div>
<h1 class="title" v-html="currentSong.name"></h1>
<h2 class="subtitle" v-html="currentSong.singer"></h2>
</div>
<div class="middle">
<div class="middle-l">
<div class="cd-wrapper" ref="cdWrapper">
<div class="cd">
<img class="image" :src="currentSong.image">
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="operators">
<div class="icon i-left">
<i class="icon-sequence"></i>
</div>
<div class="icon i-left">
<i class="icon-prev"></i>
</div>
<div class="icon i-center">
<i :class="playIcon" @click="togglePlaying"></i>
</div>
<div class="icon i-right">
<i class="icon-next"></i>
</div>
<div class="icon i-right">
<i class="icon icon-not-favorite"></i>
</div>
</div>
</div>
</div>
</transition>

<transition name="mini">
<div class="mini-player" v-show="!fullScreen" @click="open">
<div class="icon">
<img width="40" height="40" :src="currentSong.image">
</div>
<div class="text">
<h2 class="name" v-html="currentSong.name"></h2>
<p class="desc" v-html="currentSong.singer"></p>
</div>
<div class="control">
<i :class="miniIcon" @click.stop="togglePlaying"></i>
</div>
<div class="control">
<i class="icon-playlist"></i>
</div>
</div>
</transition>

http://szimg.mukewang.com/5986eb3100014a5d05610090.jpg

http://szimg.mukewang.com/5986eb3200015bbc09280539.jpg

http://szimg.mukewang.com/5986eb320001e3e209180532.jpg


写回答

2回答

ustbhuangyi

2017-08-07

对比一下最新的主干代码吧

0
1
行云流水justdoit
谢谢老师,昨天晚上已解决,是动画的钩子函数里面有问题
2017-08-08
共1条回复

ustbhuangyi

2017-08-06

你有看我的源码么?

0
2
行云流水justdoit
copy出一段代码,您也不好看出什么问题,我再和源码对比下。
2017-08-06
共2条回复

Vue2.0高级应用教学实战,开发企业级移动端音乐Web App

Vue.js高级知识应用大集合,实战企业级APP,教你搞定组件化开发。

5432 学习 · 3804 问题

查看课程