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