Vue3中如何为元素添加鼠标悬停动画？

你完全没必要用Transition组件，也不需要通过鼠标事件动态修改状态（除非你有额外逻辑需求）。你的需求是元素保持显示，仅在悬停时从缩放1变为1.5，纯CSS就能轻松搞定，这也是最简洁的方案。

方案1：纯CSS实现（推荐） #

直接利用CSS的:hover伪类和transition属性，不需要任何JS代码：

<template>
  <div class="bell-element"></div>
</template>

<style>
.bell-element {
  /* 初始缩放状态 */
  transform: scale(1);
  /* 给缩放变化添加平滑过渡 */
  transition: transform 0.3s ease;
  /* 根据你的需求添加基础样式 */
  width: 50px;
  height: 50px;
  background-color: #ccc;
}

.bell-element:hover {
  /* 悬停时的缩放状态 */
  transform: scale(1.5);
}
</style>

方案2：Vue动态class配合鼠标事件（适合需额外逻辑的场景） #

如果需要结合其他Vue逻辑（比如根据特定状态控制是否允许缩放），可以用动态class绑定鼠标事件：

<template>
  <div 
    class="bell-element"
    :class="{ 'bell-hovered': isHovered }"
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
  ></div>
</template>

<script setup>
import { ref } from 'vue'
const isHovered = ref(false)
</script>

<style>
.bell-element {
  transform: scale(1);
  transition: transform 0.3s ease;
  width: 50px;
  height: 50px;
  background-color: #ccc;
}

.bell-hovered {
  transform: scale(1.5);
}
</style>

为什么你之前的Transition方案不合适 #

Transition组件是用来处理元素挂载/卸载（比如v-if/v-show切换）时的动画，而你的需求是元素始终在页面上，仅做状态变化，用Transition完全没必要——它没有触发条件（你不想用v-if让元素消失），反而会把简单的需求复杂化。

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