vue聊天对话语音消息播放动态特效

vue2写法,vue3也能用,粘之即走:

示例:

javascript 复制代码
<template>
  <div class="voice-hidden">
    <div
      class="voice-play-chat"
      :class="[className, { 'animate-stop': !isPlaying }]"
    >
      <div class="center-box">
        <div class="box-1 box" :style="{'border-color':borderColor}"></div>
        <div class="box-2 box" :style="{'border-color':borderColor}"></div>
        <div class="box-3 box" :style="{'border-color':borderColor}"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    className: {}, // 可传值 voice-play-custom(对话中发送本人查看样式),不传即为查看对方发送语音样式
    isPlaying: {}, // 音频是否正在播放(true: 显示动效; false: 关闭动效)
    borderColor: {
    	type: String,
    	default: "rgba(0, 0, 0, 0.8)",
   }, // 音频颜色
  },
};
</script>

<style lang="scss" scoped>
@keyframes top {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}
@keyframes middle {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
}
.voice-hidden {
  position: relative;
  width: 18px;
  height: 18px;
}
.voice-play-chat {
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: 16px;
  overflow: hidden;
  transform: rotate(-45deg);
  .center-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .box {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, 0.8);
  }
  .box-1 {
    border-width: 4px;
  }
  .box-2 {
    width: 20px;
    height: 20px;
    animation: middle 0.5s steps(1) alternate infinite;
  }
  .box-3 {
    width: 36px;
    height: 36px;
    animation: top 0.5s steps(1) alternate infinite;
  }
}
.voice-play-custom {
  position: absolute;
  top: 0;
  right: 10px;
  transform: rotate(-225deg);
}
.animate-stop {
  .box {
    animation: none;
  }
}
</style>
相关推荐
zoahxmy09291 分钟前
Vue3 视频播放与截图功能实现
javascript·vue.js
waylon111135 分钟前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试
DJA_CR7 分钟前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
小旋风0123423 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
gongzemin1 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据2 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
三翼鸟数字化技术团队3 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Enti7c3 小时前
HTML5和CSS3的一些特性
开发语言·css3
Spark2384 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js