// 简化版页面过渡动画
.simple-page-transition {
  // 默认不播放动画，只有带animate类时才播放
  &.animate {
    animation: pageEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
  }
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

// 复杂版页面过渡动画
.page-transition {
  position: relative;
  height: 100%;
  
  .transition-content {
    height: 100%;
    
    &.fadeIn {
      animation: fadeIn 0.3s ease-in-out forwards;
    }
    
    &.fadeOut {
      animation: fadeOut 0.3s ease-in-out forwards;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}