uniapp自定义弹窗淡入淡出的效果

uni-app 是一款基于 Vue 的移动端跨平台开发框架，它允许开发者编写一次代码，生成适用于微信小程序、H5、App 等多种环境的应用。对于自定义弹窗的淡入淡出效果，uni-app 提供了丰富的组件和 API 来实现动画。

在 uni-app 中，你可以通过以下步骤创建一个带淡入淡出动画的自定义弹窗:

1. 使用 `dialog` 组件展示弹窗，这是uni-app内置的对话框组件，支持自定义内容。

   <view @open="showModal" @close="hideModal">
     <button @click="openDialog">点击打开</button>
   </view>

   <dialog v-model="isDialogVisible" :style="{ display: isDialogVisible ? 'block' : 'none' }">
     <!-- 自定义内容 -->
   </dialog>

2. 在 JavaScript 中控制弹窗的显示与隐藏，并添加淡入淡出的动画。uni-app 的 `Vue` 实例提供了生命周期钩子 `beforeUpdate` 和 `updated`，可以在其中监听视图的变化并调整样式。

   data() {
     return {
       isDialogVisible: false,
     }
   },
   
   methods: {
     showModal() {
       this.isDialogVisible = true;
     },
     hideModal() {
       this.isDialogVisible = false;
     },
     openDialog() {
       // 添加动画效果，假设使用 CSS 动画
       this.$nextTick(() => {
         this.$refs.dialog.style.transform = 'scale(1)';
         setTimeout(() => {
           this.$refs.dialog.style.transform = '';
         }, 500); // 动画持续时间，这里用了500ms
       });
     },
   }

3. 如果需要更精细的控制动画效果，可以在 CSS 中为 `.dialog` 或者对应的类名设置 `transition` 或者 `animation` 属性，配合 Vue 的 `$refs` 访问 DOM 元素。

注意，在实际项目中，你可能需要针对不同平台调整动画性能，因为一些旧版本的微信小程序对动画的支持有限。