在uniapp开发中，自定义弹出框结合淡入淡出动画可有效提升交互体验，实现时可通过CSS的transition属性控制透明度变化，结合uni.createAnimation API创建动画实例，设置opacity从0到1的过渡效果，在弹出框显示时调用动画；关闭时则反向操作，opacity从1渐变至0，同时需利用uniapp的生命周期钩子（如onShow、onHide）或事件监听控制动画触发时机，确保动画与弹出框显示/隐藏逻辑同步，此方案兼容多端，可灵活调整动画时长、缓动函数，实现平滑自然的过渡效果，增强用户操作流畅性。
UniApp 自定义弹出框实现淡入淡出动画效果详解
在移动端应用开发中，弹出框（Modal）作为常见的交互组件，广泛应用于提示、确认、表单填写等场景，而流畅的动画效果能显著提升用户体验，让界面交互更自然，UniApp 作为跨端开发框架，虽提供了内置的 uni.showModal 等 API，但其样式和动画定制性有限，本文将详细介绍如何通过自定义组件实现支持淡入淡出动画的弹出框，覆盖 H5、小程序、App 等多端。
为什么选择自定义弹出框？
UniApp 内置的弹出框（如 uni.showModal、uni.showToast）存在以下局限：
- 样式固定：背景色、按钮文字、弹窗大小等难以修改，无法满足个性化设计需求；
- 动画单一：默认动画效果简单，不支持自定义淡入淡出、缩放等复杂动画；
- 功能受限：无法嵌入自定义内容（如表单、图片、富文本等）。
通过自定义组件，我们可以完全控制弹出框的样式、动画逻辑、内容结构，同时利用 UniApp 的跨端能力,实现一套代码多端运行。
自定义弹出框基础结构
组件设计思路
自定义弹出框的核心要素包括：
- 遮罩层：点击遮罩可关闭弹窗，背景半透明；
- 区：支持自定义标题、内容、按钮等；
- 动画控制：通过 CSS 动画或 UniApp 动画 API 实现淡入淡出效果。
组件代码实现
创建名为 CustomModal.vue 的组件，基础结构如下：
<template>
<view v-if="isShow" class="modal-container" @click="handleMaskClick">
<!-- 遮罩层 -->
<view class="modal-mask" :class="{ 'fade-in': isShow, 'fade-out': !isShow }"></view>
<!-- 弹窗内容 -->
<view class="modal-content" :class="{ 'slide-up': isShow, 'slide-down': !isShow }">
<view class="modal-header" v-if="title">
<text class="modal-title">{{ title }}</text>
</view>
<view class="modal-body">
<slot></slot>
</view>
<view class="modal-footer" v-if="showFooter">
<view class="btn cancel" @click.stop="handleCancel">{{ cancelText }}</view>
<view class="btn confirm" @click.stop="handleConfirm">{{ confirmText }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'CustomModal',
props: {
// 是否显示弹窗
show: {
type: Boolean,
default: false
},
// 标题 {
type: String,
default: ''
},
// 取消按钮文字
cancelText: {
type: String,
default: '取消'
},
// 确认按钮文字
confirmText: {
type: String,
default: '确认'
},
// 是否显示底部按钮
showFooter: {
type: Boolean,
default: true
}
},
data() {
return {
isShow: false // 内部控制显示状态，避免动画过程中组件直接卸载
}
},
watch: {
show(newVal) {
if (newVal) {
this.isShow = true
} else {
// 延迟隐藏，等待动画播放完成
setTimeout(() => {
this.isShow = false
}, 300) // 动画时长需与 CSS 保持一致
}
}
},
methods: {
// 点击遮罩关闭
handleMaskClick() {
this.$emit('update:show', false)
this.$emit('cancel')
},
// 点击取消按钮
handleCancel() {
this.$emit('update:show', false)
this.$emit('cancel')
},
// 点击确认按钮
handleConfirm()
