Nuxt框架下，如何实现鼠标悬停缩略图时图片、原图及文字从右向左滑动？（悬停.鼠标.原图.滑动.向左.....）

wufei123 2025-03-01 阅读:24 评论:0

nuxt.js中实现鼠标悬停缩略图时图片、原图及文字从右向左滑入效果在Nuxt.js项目中，想要实现鼠标悬停缩略图时，缩略图、原图和描述文字从右向左滑入的动画效果，推荐使用轻量级动画库或直接利用CSS动画。避免使用重量级的轮播图插件，因...

Nuxt框架下，如何实现鼠标悬停缩略图时图片、原图及文字从右向左滑动？

nuxt.js中实现鼠标悬停缩略图时图片、原图及文字从右向左滑入效果

在Nuxt.js项目中，想要实现鼠标悬停缩略图时，缩略图、原图和描述文字从右向左滑入的动画效果，推荐使用轻量级动画库或直接利用CSS动画。避免使用重量级的轮播图插件，因为此需求并非轮播，而是简单的动画效果。

以下提供两种实现方法：

方法一：使用CSS动画

通过CSS的transition属性和transform: translateX()来实现平滑的水平位移动画。需要在CSS中定义动画效果，并在Vue组件中通过v-bind:style或:style动态绑定样式，根据鼠标悬停状态切换动画。

方法二：使用轻量级动画库

选择一个轻量级的动画库，例如Animate.css或类似的库，可以更方便地控制动画效果，例如动画时长、缓动函数等。这些库通常提供预定义的动画类，可以直接应用到元素上。

示例代码思路 (方法一):

PHP

<template>
  <div class="image-container">
    <div class="thumbnail" @mouseover="showImage" @mouseout="hideImage">
      <!-- 缩略图 -->
      @@##@@
    </div>
    <div class="full-image" :style="{ transform: show ? 'translateX(0)' : 'translateX(100%)' }">
      <!-- 原图 -->
      @@##@@
      <p>图片描述文字</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    showImage() {
      this.show = true;
    },
    hideImage() {
      this.show = false;
    }
  }
};
</script>

<style scoped>
.image-container {
  position: relative;
  width: 200px; /*调整宽度*/
}

.thumbnail {
  width: 100%;
}

.full-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 0.3s ease-in-out; /*调整动画时间和缓动函数*/
  transform: translateX(100%); /*初始位置在右侧*/
}

.full-image img {
  width: 100%;
}
</style>