uniapp 模态框加上动画

UniApp 的模态框通常是指那些在用户界面中以遮罩层形式显示，用于展示额外信息或请求用户确认的操作组件，比如弹窗、对话框等。为了增加用户体验，模态框可以添加动画效果，使得页面切换更为平滑和吸引人。

在 UniApp 中，你可以通过内置的`dialog`组件或者自定义组件，并结合 CSS3 动画库（如 ECharts 动画库或者 Vue 的 `v-enter`, `v-leave-to` 等过渡效果）来实现模态框的动画。例如：

1. 使用内置 dialog 组件时，可以在 `open-type` 属性设置为 'pop', 'push' 或者 'fold' 等，配合相应的 CSS 类名（如`.u-dialog-enter`, `.u-dialog-enter-active`, `.u-dialog-leave-active`, `.u-dialog-leave-to`) 来控制进入、离开动画。

<template>
  <button @click="showModal">打开模态</button>
  <view class="modal-mask" v-show="maskVisible">
    <dialog :open-type="openType" :visible.sync="dialogVisible">
      <div>这是模态内容</div>
    </dialog>
  </view>
</template>

<script>
export default {
  data() {
    return {
      maskVisible: false,
      dialogVisible: false,
      openType: 'pop' // 可以选择 pop, push 或 fold
    };
  },
  methods: {
    showModal() {
      this.dialogVisible = true;
    }
  }
};
</script>

2. 对于更复杂的动画效果，可以利用第三方库或自定义样式，编写 JavaScript 动画代码或使用帧动画工具（如 TypeScript 中的 `vue-animate` 插件）来定制动画。