vue图片由小放大

原生效果

<template>
  <div>
    <transition>
      <img :src="data:imageUrl" class="image" />
    </transition>
  </div>
</template>

<script>
import imageUrl from "../assets/backmr.png";
export default {
  data() {
    return {
      imageUrl,
    };
  },
  methods: {},
};
</script>

<style>
.image {
  width: 200px;
  height: 200px;
  animation: image-animation 3s forwards;
  transform-origin: center;
}

@keyframes image-animation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>

优化效果

<template>
  <div>
    <button @click="showImage">显示图片</button>
    <transition name="image-animation">
      <div v-if="showImageFlag" class="image-container1">
        <img class="image" :src="data:imageUrl" />
      </div>
    </transition>
  </div>
</template>

<script>

export default {
  data() {
    return {
      showImageFlag: false,
      imageUrl:require("../assets/yes.png"),
    };
  },
  methods: {
    showImage() {
      this.showImageFlag = true;
      setTimeout(() => {
        this.showImageFlag = false;
      }, 4000); // 设置定时器，3秒后将 showImage 设置为 false
    },
  },
};
</script>

<style>
.image-container1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.image {
  width: 200px;
  height: 200px;
  animation: image-animation 3s forwards;
  transform-origin: center;
}
@keyframes image-animation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>