function toggleRemindWithAnimation(page, { remindKey = 'IsShowRemind', animationKey = 'parentAnimation', panelAnimationKey = 'panelAnimation', // 新增:控制内容面板的动画类名 duration = 400, showAnimation = 'remind-slide-up', hideAnimation = 'remind-slide-down', vectorKey = 'VectorCSS', hideColor = 'rgba(0,0,0,0)', showColor = 'rgba(26,67,51,0.5)' } = {}) { // 获取当前显示状态 const isCurrentlyShown = page.data[remindKey]; if (isCurrentlyShown) { // 如果当前是显示状态,先播放隐藏动画,然后再隐藏 const animationData = {}; // 只为内容面板设置滑动动画 animationData[panelAnimationKey] = hideAnimation; // 设置蒙版透明度动画为渐变消失 animationData[vectorKey] = "background-color: " + hideColor + "; transition: background-color " + duration + "ms ease"; page.setData(animationData); // 等待动画完成后再隐藏弹窗 setTimeout(function() { const hideData = {}; hideData[remindKey] = false; page.setData(hideData); }, duration); } else { // 如果当前是隐藏状态,直接显示并播放显示动画 const showData = {}; showData[remindKey] = true; // 只为内容面板设置滑动动画 showData[panelAnimationKey] = showAnimation; // 设置蒙版透明度动画为渐变出现 showData[vectorKey] = "background-color: " + hideColor + "; transition: background-color " + duration + "ms ease"; page.setData(showData); // 在下一帧设置最终的半透明状态,触发过渡动画 setTimeout(function() { const updateData = {}; updateData[vectorKey] = "background-color: " + showColor + "; transition: background-color " + duration + "ms ease"; page.setData(updateData); }, 50); } } module.exports = { toggleRemindWithAnimation:toggleRemindWithAnimation, }