.autoRotate{
/* 动画名,一直播放iteration(一直重复),匀速(timing)，时间2s(duration),状态(running) */
animation-name:autoRotate;
animation-iteration-count:infinite;
animation-timing-function: linear;
animation-duration:2s;
animation-play-state:running;
}
/* 动画状态 */
.pause{
animation-play-state:paused;
}
/* 评论 */
.comment{
height: 150px;
/* background-color: skyblue; */
}
.comment li{
display: flex;
padding: 5px;
}
.comment li .left{
width: 120px;
height: 120px;
}
.comment li .left img{
width: 100px;
}
.comment li a{
text-decoration: none;
font-weight: bold;
color: crimson;
}
</style>
</head>
<body>
<div id="app">
<!-- 左边 -->
<div id="left">
<input type="text" value="请输入你要搜索的歌名" v-model="inputValue" @keyup.enter="search">
<!-- 给li添加过渡 ;v-on:after-enter="afterEnter":钩子函数-->
<transition-group name="list" tag="ul" v-on:after-enter="afterEnter">
<!-- play(item.id):把id传过去 -->
<li v-for="(item, index) in musicList" :key="item.id" @dblclick="playMusic(item.id,item.album.id)" :style="{'transition-delay':index*100+'ms'}" >
{{item.name}}-----演唱者:{{item.artists[0].name}}
</li>
</transition-group>
</div>
<!-- 右边,播放 -->
<div id="right">
<!-- 专辑页面 -->
<img :src="picUrl" alt="" class="cover autoRotate" :class="{pause:isPause}">
<!-- autoplay:自动播放,controls显示控件 ;@play="play"是自定义方法-->
<audio :src="songUrl" autoplay controls @play="play" @pause="pause" ></audio>
<h3>精彩评论</h3>
<div class="comment">
<ul>
<!-- 遍历数组时,需要动画时才用到key -->
<li v-for="(item, index) in comments" >
<div class="left">
<img :src="item.user.avatarUrl" alt="">
</div>
<div class="right">
<a href="#" rel="external nofollow" >{{item.user.nickname}}</a>
<p>{{item.content}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
rightv>
</body>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
