本文主要是介绍vue做的一个一点就转的转盘（音乐磁盘），点击停止时会在几秒内缓慢停止，再次点击按钮可以再次旋转，，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
先看效果：
代码：主要部分我会红线画出来
css:部分：
源码：
vue部分：
<template><div class="song-lyric"><div><div class="type"><div class="right"><div class="right-center" :class="{ 'rotates': isplay }"><div><img src="https://imagesone.oss-cn-beijing.aliyuncs.com/imagebishe/player_bar.png"class="right-top" :class="{rotated: isplay}"></div><div><img src="https://imagesone.oss-cn-beijing.aliyuncs.com/imagebishe/disc.png"class="tight-bottm" :style="{ transform: 'rotate(' + rotationAngle + 'deg)' }"></div></div></div><div class="lyric-title"><!-- 有歌词 --><!-- <el-input v-model="input" placeholder="请输入内"></el-input><el-input v-model="input" placeholder="差不多"></el-input> --><ul class="has-lyric" v-if="lyr.length" key="index"><li v-for="(item,index) in lyr" v-bind:key="index">{{item[1]}}</li></ul><!-- 没有歌词 --><div v-else class="no-lyric" key="no-lyric"><span>暂无歌词</span></div></div></div></div></div></template>
<script>import {mixin} from '../mixins';import {mapGetters} from 'vuex';export default {name: 'lyric',mixins: [mixin],data() {return {// input: '',lyr: [], //当前歌曲的歌词isplay: undefined, //获取歌曲开关状态rotationAngle: 0 // 记录盒子当前的旋转角度}},computed: {...mapGetters(['curTime', //当前歌曲播放到的位置'id', //当前播放的歌曲id'lyric', //歌词'listIndex', //当前歌曲在歌单中的位置'listOfSongs', //当前歌单列表'isPlay' //播放状态])},created() {this.isplay = this.isPlay//获取开关console.log('data', this.isplay);//获取点击图片进去歌词页面的开关状态this.lyr = this.lyric;this.rotateBox();console.log('this.lyr', this.lyr)console.log('this.mapGetters', this.mapGetters)},watch: {isPlay() {this.isplay = this.isPlayconsole.log('data', this.isplay);this.rotateBox();},id: function() {this.lyr = this.parseLyric(this.listOfSongs[this.listIndex].lyric)},curTime: function() {if (this.lyr.length > 0) {for (let i = 0; i < this.lyr.length; i++) {if (this.curTime >= this.lyr[i][0]) {for (let j = 0; j < this.lyr.length; j++) {document.querySelectorAll('.has-lyric li')[j].style.color = '#ffffff';document.querySelectorAll('.has-lyric li')[j].style.fontSize = '15px';}if (i >= 0) {document.querySelectorAll('.has-lyric li')[i].style.color = '#95d2f6';document.querySelectorAll('.has-lyric li')[i].style.fontSize = '25px';}}}}}},methods:{rotateBox(){if(this.isplay){this.rotationAngle +=1;// if(this.rotationAngle >= 360){// this.rotationAngle = this.rotationAngle % 360;// }setTimeout(this.rotateBox, 20);// console.log('this.rotateBox',this.rotationAngle)}}}}
</script>
<style lang="scss" scoped>@import '../assets/css/lyric.scss';
</style>css部分：
@import "var.scss";.song-lyric {// margin: auto;// margin-top: $header-height + 20px;width: 100%;height: 100%;// background-color: $color-white;border-radius: 12px;display: block;background-color: rgb(167, 167, 167);// padding: 0 20px 50px 20px;// background-color: rgba(0,0,0,.55);font-family: $font-family;// background-size: cover;// filter: blur(30px);z-index: 1;.lyric-title {text-align: center;width: 50%;height: 100vh;overflow-y: scroll;line-height: 60px;border-bottom: 2px solid $color-black;margin-top: 50px;// background: rgba(21, 21, 21, 0.6);background-color: rgba(0,0,0,.65);z-index: 2;}.type{display: flex;text-align: center;width: 100%;height: 100vh;overflow: hidden;line-height: 60px;border-bottom: 2px solid $color-black;z-index: 2;}.right{text-align: center;width: 50%;height: 100vh;overflow: hidden;line-height: 60px;border-bottom: 2px solid $color-black;margin-top: 50px;display: flex;justify-content: center;align-items: center;flex-direction: column;flex-wrap: wrap;// background: rgba(21, 21, 21, 0.6);background-color: rgba(0,0,0,.65);// backdrop-filter: blur(4px);// box-shadow: inset 0px 1px 6px rgba(255,255,255,0.6), 2px 2px 15px rgba(0,0,0,0.5);z-index: 2;}.right-top{ //指针position: absolute; z-index: 1; width: auto; left:45%; top:117px; height:200px;transition: transform 0.7s linear; transform: rotate(-30deg) translate(35px , -10px); }.rotated {transform: rotate(0deg);}.right-center{position: relative;width: 600px;height: 1000px;// background-color: rgb(206, 198, 198);}.has-lyric {font-size: 18px;width: 100%;min-height: 100%;text-align: center;padding-top: 120px;li {width: 100%;height: 40px;line-height: 40px;}}.no-lyric {// margin: 200px 0;padding: 200px 0 0 0;width: 100%;text-align: center;span {font-size: 18px;text-align: center;}}
}.lyric-fade-enter,
.lyric-fade-leave-to {transform: translateX(30px);opacity: 0;
}.lyric-fade-enter-active,
.lyric-fade-leave-active {transition: all 0.3s ease;
}.tight-bottm{ //圆position: absolute;top:225px; width: 400px; left:18%; height:400px; border-radius: 50%;transition: transform 0.7s linear;}.active {animation: none !important;// animation: spin 5s linear infinite;}// @keyframes spin {// 100% {// transform: rotate(360deg);// }// }这篇关于vue做的一个一点就转的转盘（音乐磁盘），点击停止时会在几秒内缓慢停止，再次点击按钮可以再次旋转，的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
