english_learned_master/utils/animation.js

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, 
}