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

Question

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

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

Answer 1

试试这个。

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

Answer 2

在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变量绑定到某个事件上，例如点击事件，以触发图片的显示和过渡效果。

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