@import "../var";

// vue过渡动画
%fade-in {
  opacity: 1;
  transition: opacity $transition;
}

%fade-out {
  opacity: 0;
}

// 过渡动画-透明度变化
.fade-enter-active,
.fade-leave-active {
  @extend %fade-in;
}

.fade-enter,
.fade-leave-active {
  @extend %fade-out;
}

// 过渡动画-透明度变化-快
.fade-quick-enter-active,
.fade-quick-leave-active {
  @extend %fade-in;

  transition-duration: $transition-duration-quick;
}

.fade-quick-enter,
.fade-quick-leave-active {
  @extend %fade-out;
}

// 过渡动画-透明度变化-慢
.fade-slow-enter-active,
.fade-slow-leave-active {
  @extend %fade-in;

  transition-duration: $transition-duration-slow;
}

.fade-slow-enter,
.fade-slow-leave-active {
  @extend %fade-out;
}

// 过渡动画-左右切换(Beta)
.switch-lr-enter-active,
.switch-lr-leave-active,
.switch-rl-enter-active,
.switch-rl-leave-active {
  opacity: 1;
  transition: transform $transition, opacity $transition;
  transform: translateX(0);
}

.switch-lr-enter {
  opacity: 0;
  transform: translateX(-50%);
}

.switch-lr-leave-to {
  opacity: 0;
  transform: translateX(50%);
}

.switch-rl-enter {
  opacity: 0;
  transform: translateX(50%);
}

.switch-rl-leave-to {
  opacity: 0;
  transform: translateX(-50%);
}