Taro使用Vue的transition组件只有淡入（进入）没有淡出（离开）动画

1. 兼容性问题，翻阅文档

<transition> 组件内部使用了 getComputedStyle，用于嗅探组件上的动画样式。但是在小程序中没有办法实现 getComputedStyle，可以通过以下方法进行 hack：

为元素的 style 设置 transitionDuration 或 animationDuration 指定过渡时间，即可兼容 <transition>。

代码如下：

<transition>
  <view style="animationDuration: 0.5s" />
</transition>

2. 但是这样仍然解决不了问题，后来翻了翻nutui（京东风格的移动端 Vue 组件库，支持多端小程序）overlay组件的源码，调试发现三个小点，满足即可实现淡出

// ./index.taro.vue 文件
<template>
  <Transition name="overlay-fade">
    <view v-show="visible" :class="classes" :style="style" :catch-move="lockScroll" @click="onClick">
      <slot></slot>
    </view>
  </Transition>
</template>
<script setup lang="ts">
import { CSSProperties, computed } from 'vue'
import './index.scss

defineOptions({
  name: 'NutOverlay'
})

export type OverlayProps = Partial<{
  visible: boolean
  zIndex: string | number
  duration: string | number
  lockScroll: boolean
  overlayClass: string
  overlayStyle: CSSProperties
  closeOnClickOverlay: boolean
}>

const props = withDefaults(defineProps<OverlayProps>(), {
  visible: false,
  zIndex: 2000,
  // 1.props传入 duration
  duration: 0.3,
  lockScroll: true,
  overlayClass: '',
  closeOnClickOverlay: true
})

const emit = defineEmits(['click', 'update:visible'])

const classes = computed(() => {
  const prefixCls = 'nut-overlay'
  return {
    [prefixCls]: true,
    [props.overlayClass]: true
  }
})

// 2.style 使用计算属性
const style = computed(() => {
  return {
  	// 3.获取 transitionDuration
    transitionDuration: `${props.duration}s`,
    zIndex: props.zIndex,
    ...props.overlayStyle
  }
})

const onClick = (e: MouseEvent) => {
  emit('click', e)
  if (props.closeOnClickOverlay) {
    emit('update:visible', false)
  }
}
</script>

// ./index.scss 文件
.overlay-fade-enter-active,
.overlay-fade-leave-active {
  transition-property: opacity;
  transition-timing-function: ease;
}

.overlay-fade-enter-from,
.overlay-fade-leave-to {
  opacity: 0;
}

.nut-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $overlay-bg-color;
}

.nut-overflow-hidden {
  overflow: hidden !important;
}