uni-transition 组件，微信小程序端使用内置的 fade 动画，首次显示时没有动画效果。

[yeyuqh]

• uni-popup 组件的 mask 就有这个问题，打开时 mask 是没有动画的，只有关闭的时候 mask 才有 fade 动画。

<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
</script>

<template>
  <view class="flex h-screen w-screen items-center justify-center">
    <button class="bg-white p-3" @click="show = !show">SHOW</button>
  </view>

  <uni-transition
    mode-class="fade" :show="show"
    :styles="{
      position: 'fixed',
      left: 0,
      right: 0,
      bottom: 0,
      zIndex: 900,
      width: '100vw',
      height: '100vh',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
    }"
  >
    <view class="flex h-screen w-screen items-center justify-center">
      <button class="bg-white p-3" @click="show = !show">HIDE</button>
    </view>
  </uni-transition>
</template>

CleanShot.2025-04-03.at.16.43.09.mp4

[mehaotian]

我使用你上面的代码，我本地测试了 web 和小程序平台 ，没有出现你的问题 ， 可以详细描述一下平台信息吗 ？ vue2 还是vue3 ，小程序的基础库版本等？

[yeyuqh]

我使用你上面的代码，我本地测试了 web 和小程序平台 ，没有出现你的问题 ， 可以详细描述一下平台信息吗 ？ vue2 还是vue3 ，小程序的基础库版本等？

1. 通过 npx degit dcloudio/uni-preset-vue#vite my-vue3-project 创建的 Vue3 项目
2. 通过 npm 方式安装的 uni-ui
3. 微信小程序基础库版本 3.6.6 以上(和基础库版本应该没有关系，测试了下不同的版本都有这个问题)

最小复现 👉 https://github.com/yeyuqh/uni-transition-bug-reproduction