vue做的一个一点就转的转盘(音乐磁盘),点击停止时会在几秒内缓慢停止,再次点击按钮可以再次旋转,

本文主要是介绍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做的一个一点就转的转盘(音乐磁盘),点击停止时会在几秒内缓慢停止,再次点击按钮可以再次旋转,的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/392293

相关文章

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

Linux使用fdisk进行磁盘的相关操作

《Linux使用fdisk进行磁盘的相关操作》fdisk命令是Linux中用于管理磁盘分区的强大文本实用程序,这篇文章主要为大家详细介绍了如何使用fdisk进行磁盘的相关操作,需要的可以了解下... 目录简介基本语法示例用法列出所有分区查看指定磁盘的区分管理指定的磁盘进入交互式模式创建一个新的分区删除一个存

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

VMWare报错“指定的文件不是虚拟磁盘“或“The file specified is not a virtual disk”问题

《VMWare报错“指定的文件不是虚拟磁盘“或“Thefilespecifiedisnotavirtualdisk”问题》文章描述了如何修复VMware虚拟机中出现的“指定的文件不是虚拟... 目录VMWare报错“指定的文件不是虚拟磁盘“或“The file specified is not a virt

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

不删数据还能合并磁盘? 让电脑C盘D盘合并并保留数据的技巧

《不删数据还能合并磁盘?让电脑C盘D盘合并并保留数据的技巧》在Windows操作系统中,合并C盘和D盘是一个相对复杂的任务,尤其是当你不希望删除其中的数据时,幸运的是,有几种方法可以实现这一目标且在... 在电脑生产时,制造商常为C盘分配较小的磁盘空间,以确保软件在运行过程中不会出现磁盘空间不足的问题。但在

SQL Server数据库磁盘满了的解决办法

《SQLServer数据库磁盘满了的解决办法》系统再正常运行,我还在操作中,突然发现接口报错,后续所有接口都报错了,一查日志发现说是数据库磁盘满了,所以本文记录了SQLServer数据库磁盘满了的解... 目录问题解决方法删除数据库日志设置数据库日志大小问题今http://www.chinasem.cn天发

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE