Vue.js中实现Logo鼠标悬停平滑上下移动动画问题

方法一：CSS动画实现（推荐） #

这种方式更适配Vue项目开发习惯，兼容性也更稳定。

1. 在组件样式中定义动画规则：

@keyframes dotBounce {
  0% {
    cy: 8.495px;
  }
  50% {
    cy: 52.779px;
  }
  100% {
    cy: 8.495px;
  }
}

.logo-dot {
  transition: none; /* 避免默认过渡效果干扰动画 */
}

.logo-dot:hover {
  animation: dotBounce 3s ease-in-out 1;
}

2. 给SVG圆点添加对应class：

<circle 
  id="Ellipse_2" 
  data-name="Ellipse 2" 
  class="logo-dot"
  cx="92.995" 
  cy="8.495" 
  r="3.995"  
  fill="#c5a075"
/>

说明：ease-in-out保证动画首尾平滑过渡，1指定动画仅执行一次，鼠标移出后圆点会自动回到初始位置。

方法二：改进SVG原生animate元素 #

针对你原有的SVG代码，调整触发逻辑和参数解决闪烁问题：

<circle 
  id="Ellipse_2" 
  data-name="Ellipse 2" 
  cx="92.995" 
  cy="8.495" 
  r="3.995"  
  fill="#c5a075"
>
  <animate 
    attributeName="cy"
    dur="3s"
    calcMode="spline"
    repeatCount="1"
    values="8.495; 52.779; 8.495"
    keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
    keyTimes="0;0.5;1"
    begin="mouseenter"
    restart="whenNotActive"
    fill="remove"
  />
</circle>

关键调整点：

• begin="mouseenter"：设置鼠标进入时触发动画
• repeatCount="1"：取消无限重复，仅执行一次动画
• 补充keySplines为两组曲线值（对应keyTimes的两个时间间隔），确保每个阶段的平滑过渡
• restart="whenNotActive"：防止鼠标快速多次悬停导致动画重叠
• fill="remove"：动画结束后回到初始位置，若希望停在终点可改为fill="freeze"

内容的提问来源于stack exchange，提问作者lhrubisko