/**
 * KRA - Transition Styles
 * 过渡动画样式
 */

// 淡入淡出
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 0.3s ease;
}

// 缩放
.zoom-enter {
  opacity: 0;
  transform: scale(0.9);
}
.zoom-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.zoom-exit {
  opacity: 1;
  transform: scale(1);
}
.zoom-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

// 滑动（从右）
.slide-right-enter {
  opacity: 0;
  transform: translateX(20px);
}
.slide-right-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.slide-right-exit {
  opacity: 1;
  transform: translateX(0);
}
.slide-right-exit-active {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

// 滑动（从左）
.slide-left-enter {
  opacity: 0;
  transform: translateX(-20px);
}
.slide-left-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.slide-left-exit {
  opacity: 1;
  transform: translateX(0);
}
.slide-left-exit-active {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

// 滑动（从上）
.slide-up-enter {
  opacity: 0;
  transform: translateY(-20px);
}
.slide-up-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.slide-up-exit {
  opacity: 1;
  transform: translateY(0);
}
.slide-up-exit-active {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

// 滑动（从下）
.slide-down-enter {
  opacity: 0;
  transform: translateY(20px);
}
.slide-down-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.slide-down-exit {
  opacity: 1;
  transform: translateY(0);
}
.slide-down-exit-active {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

// 页面切换动画
.page-transition-enter {
  opacity: 0;
  transform: translateX(10px);
}
.page-transition-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.page-transition-exit {
  opacity: 1;
  transform: translateX(0);
}
.page-transition-exit-active {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
