vue实现微信语音发送动画

要实现微信语音发送动画，你可以使用Vue的过渡动画来实现。

首先，你需要在Vue组件中添加一个状态，用于判断语音是否正在发送：

<template>
  <div>
    <div v-if="isSending">
      <span>正在发送中...</span>
      <div class="voice-sending-animation"></div>
    </div>
    <div v-else>
      <button @click="sendVoice">发送语音</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSending: false
    }
  },
  methods: {
    sendVoice() {
      this.isSending = true
      // 发送语音的逻辑
    }
  }
}
</script>

然后，在`<style>`标签中添加一个CSS类来定义语音发送动画：

.voice-sending-animation {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #4E7CE1;
  animation: voice-sending 1s infinite ease-in-out;
}

@keyframes voice-sending {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(0.5);
  }
}

这里使用了CSS的`@keyframes`规则来定义动画，`animation`属性来引用动画。当你点击“发送语音”按钮时，`isSending`状态将变为`true`，触发过渡动画的显示。当语音发送完成后，将`isSending`状态变为`false`，过渡动画将消失。