为什么我的Zoom组件第一次加载时没有平滑过渡效果？

Designer°春彦提问于 2026-01-30 16:01:34 阅读 134

组件

我用Vue的transition组件做元素缩放动画，设置了transform: scale和过渡效果，但第一次加载时元素直接显示，没有平滑放大效果，刷新页面反而正常了。试过加v-cloak也不行，哪里出问题了？


<transition
  name="zoom"
  @before-enter="beforeEnter"
>
  <div v-if="show" class="box">内容</div>
</transition>


.zoom-enter-active {
  transition: transform 0.5s ease;
}
.zoom-enter {
  transform: scale(0);
}

控制台没报错，开发者工具里看到第一次渲染时.zoom-enter类确实被应用了，但动画就是不执行…

我来解答赞 6 收藏

反馈

1 条解答

UI莹雪 Lv1

这个问题我遇到过，主要是因为第一次加载时，Vue的过渡机制检测不到初始状态的变化。简单说，就是元素一开始就已经在DOM里了，Vue认为不需要触发进入动画。

一般这样处理：给div加一个key属性，强制让Vue重新创建这个元素，而不是复用。修改后的代码是这样的：

<transition

  name="zoom"

  @before-enter="beforeEnter"

>

  <div v-if="show" :key="boxKey" class="box">内容</div>

</transition>



<script>

export default {

  data() {

    return {

      show: true,

      boxKey: 0 // 新增一个key

    };

  },

  methods: {

    beforeEnter(el) {

      // 如果有其他初始化操作可以写这里

    },

    reloadBox() {

      this.boxKey += 1; // 切换key值强制重新渲染

    }

  },

  mounted() {

    this.reloadBox(); // 第一次加载时手动触发一下

  }

};

</script>

这样做的原理是，通过改变key值，让Vue认为这是一个全新的元素，从而正确触发进入动画。记得在mounted生命周期里调用一次reloadBox方法，确保第一次加载也能正常动画。

另外，如果你发现有时候动画还是不生效，可以检查下CSS是否被其他样式覆盖了，这种情况我也踩过坑...

2026-01-30 18:00