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

<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>