Zoom缩放动画在Vue中怎么实现才不会闪动？

慕容兴瑞提问于 2026-03-08 19:28:21 阅读 5

组件

我用Vue写了个图片预览组件，想加个zoom-in的进入动画，但每次打开都先闪一下原图再放大，体验很怪。试过用transition包裹，也加了mode=”in-out”，还是不行。

这是我的代码：

<template>
  <transition name="zoom">
    <img v-if="show" :src="imgUrl" class="preview-img" />
  </transition>
</template>

<style scoped>
.zoom-enter-active { transition: transform 0.3s ease; }
.zoom-enter-from { transform: scale(0); }
.zoom-enter-to { transform: scale(1); }
</style>

是不是哪里写错了？为啥还是会闪一下？

我来解答赞 2 收藏

反馈

1 条解答

闲人兴娜 Lv1

这个闪动问题我遇到过，主要是因为图片加载完成前DOM已经渲染了。试试这样改：

关键点是要确保图片加载完成后再开始动画，不然浏览器会先显示默认尺寸的图片。改成这样：

主要改动有三处：
1. 加了 appear 属性处理初始渲染
2. 用 loaded 状态控制时机
3. 图片加载完成时触发 @load 事件

CSS部分你原来写的没问题。这种问题在前端还挺常见的，本质是资源加载和DOM渲染时序问题，后端就没这种烦恼（笑）

2026-03-08 20:01