问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用Vue.js制作图片到Div的飞入和缩小效果？

头像
花开浅夏
    75629

    大佬们，用vue怎么实现，上面是一个图片，下面是一个div，点击图片飞入到div里面（垂直方向上），且图片慢慢缩小直至消失呢？

    translate(0rpx, 100px)，用这个写，慢慢缩小的怎么做呢，且可以飞到div里指定位置

    前端vue.jscss
    阅读 842
    avatarAI BotBETA

    在Vue.js中实现图片的飞入和缩小效果，你可以使用Vue的过渡效果系统（<transition> 组件）以及CSS动画或过渡。以下是一个简单的示例，展示如何实现你所描述的效果：

    首先，在你的Vue组件的模板中，你需要定义图片和div，并且使用<transition>组件来包裹图片，以便应用过渡效果。同时，你还需要一个变量来控制图片是否应该被显示和过渡。

    <template>
  <div class="container">
    <div class="target-div">这是目标div</div>
    <transition
      name="fly-and-shrink"
      @before-enter="beforeEnter"
      @enter="enter"
    >
      <img v-if="showImage" src="your-image-source.jpg" alt="Flying Image" />
    </transition>
  </div>
</template>

    接下来，在你的Vue组件的script部分，定义showImage变量以及beforeEnter和enter方法，这些方法将在过渡的不同阶段被调用。

    <script>
export default {
  data() {
    return {
      showImage: false,
    };
  },
  methods: {
    beforeEnter(el) {
      el.style.transform = 'translateY(-100px) scale(1)';
      el.style.opacity = 0;
    },
    enter(el, done) {
      const duration = 1000; // 过渡持续时间，单位为毫秒
      el.style.transition = `transform ${duration}ms ease, opacity ${duration}ms ease`;
      el.style.transform = 'translateY(0) scale(0)';
      el.style.opacity = 1;
      setTimeout(() => {
        done();
      }, duration);
    },
  },
};
</script>

    最后，在你的CSS中定义fly-and-shrink过渡的样式。

    <style scoped>
.fly-and-shrink-enter-active,
.fly-and-shrink-leave-active {
  transition: transform 1s ease, opacity 1s ease;
}
.fly-and-shrink-enter,
.fly-and-shrink-leave-to {
  transform: translateY(-100px) scale(1);
  opacity: 0;
}
</style>

    在这个示例中，我们使用了Vue的<transition>组件，并在其中定义了beforeEnter和enter两个钩子函数，分别用于在过渡开始之前和过渡开始时设置元素的初始状态。

    beforeEnter钩子设置了图片的初始位置（translateY(-100px)）和初始大小（scale(1)），以及初始透明度（opacity: 0）。

    enter钩子设置了过渡的持续时间和过渡效果的属性，包括transform和opacity。它改变了图片的位置（translateY(0)）和大小（scale(0)），并设置了结束时的透明度（opacity: 1）。

    注意，done回调函数在过渡完成后被调用，这是必要的，因为Vue需要知道何时过渡已经完成。

    此外，请确保将showImage变量绑定到某个事件上，例如点击事件，以触发图片的显示和过渡效果。

    这只是一个简单的示例，你可能需要根据你的具体需求对其进行调整。

    1 个回答
    得票最新
    头像
    前端搬运工
      7671519

      试试这个。

      html

      <div>
    <img
      src="xxx.png"
      @click="handleClick"
      :style="{ transform: `translateY(${imageY}px) scale(${imageScale})`, transition: `transform ${transitionDuration}ms` }"
    />
    <div class="box"></div>
  </div>

      js

      export default {
  data() {
    return {
      imageY: 0,
      imageScale: 1,
      transitionDuration: 3000
    };
  },
  methods: {
    handleClick() {
      this.imageY = 100; 
      this.imageScale = 0;
    }
  }
};
</script>

      css

      .box{
  width: 200px; 
  height: 200px; 
  background: #ccc; 
}
img {
  width: 100px;
  height: 100px;
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题