南京培训网站建设,外贸长尾关键词挖掘网站,网站推广对企业的优势,建设银行 杭州市公积金管理中心网站介绍
语音播放的律动效果#xff0c;通俗来说就是一个带动画的特殊样式的进度条#xff0c;播放的部分带有上下律动的动画#xff0c;未播放的部分是普通的灰色竖状条。
实现中夹带了less变量、继承和循环遍历#xff0c;可以顺带学习一下。
结果展示
大致效果如图所示…介绍
语音播放的律动效果通俗来说就是一个带动画的特殊样式的进度条播放的部分带有上下律动的动画未播放的部分是普通的灰色竖状条。
实现中夹带了less变量、继承和循环遍历可以顺带学习一下。
结果展示
大致效果如图所示样式需要改下动画效果bar中的上边距调整下即可。 代码
templatediv classripple-containerdiv classblue-rippletemplate v-for(item, index) in rippleList!-- if判断是判断当前进度来展示播放还是未播放 --div v-ifindex Math.floor(rate * rippleList.length) :keyindex :style{ height: item % }/divspan v-else :keyindex/span/template/div/div
/templatescript
export default {props: {// 当前进度传入0.4这种数字进度需要从0逐渐增长直接传入一个比较大的进度只会出现空白一段的现象rate: {type: Number,default: 0.4,},},data() {return {rippleList: [40, 20, 40, 50, 70, 50, 20, 40, 30, 20, 30, 50, 100, 60, 20, 40, 30, 20, 30, 40, 70, 40, 20, 40, 40, 50, 70, 50,20, 40, 30, 20, 30, 50, 100, 60, 20,],};},
};
/scriptstyle langless scoped
.ripple-container {.blue-ripple {width: 100%;height: 48px;display: flex;// 纵向居中align-items: center;// less变量主题色color: #3370ff;// 给span标签增加样式不设置高度是因为高度在动画中// span标签用于展示波纹律动效果span {width: 3px;border-radius: 18px;margin-right: 4px;}// div继承span标签的样式用来统一波纹条样式// div标签用于展示非正在播放的部分div {// less继承需要将所有层级的类名都写上:extend(.ripple-container .blue-ripple span);background: rgba(0, 0, 0, 0.16);}keyframes bar {0% {background: color;margin-top: 5%;height: 10%;}50% {background: color;margin-top: 0;height: 100%;}100% {background: color;margin-top: 5%;height: 10%;}}// less循环遍历生成span的样式// 这里使用的是less的when语法当i小于等于n时执行.generate-span(n,i:1) when(i n) {span:nth-child({i}) {// 这个本来是想配合.generate-keyframes使用的但是less似乎不支持遍历生成keyframes的名字// name: bar{i} ;animation: bar 2s 0.2s * i infinite linear;}// 递归调用生成下一个span的样式这里when是判断是否结束的这个递归调用用来形成遍历.generate-span(n, i 1);}// 循环遍历生成keyframes生成有问题.generate-keyframes(n,i:1) when(i n) {// 用less变量来解决不能直接使用i问题keyfaramesName: bar{i} ;// 似乎不支持动态生成keyframes的名称keyframes keyfaramesName {0% {background: color;margin-top: 5%;height: 10;}50% {background: color;margin-top: 0;height: 100;}100% {background: color;margin-top: 5%;height: 10;}}.generate-keyframes(n, i 1);}// 调用循环遍历.generate-span(100);// .generate-keyframes(100);}
}
/style
结语
整体效果还可以动态生成keyframes名称似乎不支持如有大神了解烦请指教。
对文章有好的建议欢迎提出。讲解不细之处欢迎指出。
