vue实现移入移出效果

Vue 实现移入移出效果

在 Vue 中实现移入移出效果可以通过 @mouseenter 和 @mouseleave 事件监听器结合数据绑定或 CSS 过渡完成。以下是几种常见实现方式：

使用事件与数据绑定控制显示状态

通过修改数据属性触发动态样式或内容变化：

<template>
  <div 
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
    :class="{ 'highlight': isHovered }"
  >
    鼠标悬停查看效果
    <p v-if="isHovered">移入时显示的内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false
    };
  }
};
</script>

<style>
.highlight {
  background-color: #f0f0f0;
  transition: background-color 0.3s;
}
</style>

纯 CSS 悬停方案

若无需逻辑处理，可直接用 CSS 伪类实现：

<template>
  <div class="hover-effect">
    鼠标悬停触发样式变化
  </div>
</template>

<style>
.hover-effect {
  transition: all 0.3s;
}
.hover-effect:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>

结合 Vue Transition 组件

实现更复杂的动画效果：

<template>
  <div 
    @mouseenter="showTooltip = true"
    @mouseleave="showTooltip = false"
  >
    悬停显示提示
    <transition name="fade">
      <div v-if="showTooltip" class="tooltip">提示信息</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTooltip: false
    };
  }
};
</script>

<style>
.tooltip {
  position: absolute;
  background: #333;
  color: white;
  padding: 5px;
  border-radius: 4px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

第三方动画库（如 Animate.css）

通过类名快速添加动画：

<template>
  <div
    @mouseenter="animate = 'animate__animated animate__tada'"
    @mouseleave="animate = ''"
    :class="animate"
  >
    悬停触发动画
  </div>
</template>

<script>
export default {
  data() {
    return {
      animate: ''
    };
  }
};
</script>

<!-- 项目中需先安装引入 animate.css -->

关键点总结

• 事件监听：@mouseenter 和 @mouseleave 是核心事件。
• 状态管理：通过数据属性控制样式或内容的显示。
• 动画优化：CSS 过渡或 Vue Transition 组件提升交互流畅度。
• 性能考虑：简单效果优先使用 CSS，复杂逻辑再结合 JavaScript。