// 每个项目可以自定义各自的动画效果，参考以下实现方式

/**
 * 动画名称解析
 * windows   ： container 组件做的页面切换
 * login     ： 登录
 * fade      ： 渐变
 * banner    ： 轮播图
 * notify    ： 全局提示
 * tip-award ： 中奖后的全局提示
 * loading   ： 加载中
 * modal     ： modal 框
 * popover   ： popover
 * toast     ： toast
 * manager   ： 全局弹出层的 manager
 */

$fadeTransDuration     : 0.2s;
$toastransDuration     : 0.2s;
$popoverTransDuration  : 0.2s;
$loadingTransDuration  : 0.2s;
$modalTSDuration       : 0.3s;
$dropMenuTSDuration    : 0.3s;
$notifyTransDuration   : 0.2s;

@mixin modal($animateName, $offset: 20px, $duration: $modalTSDuration) {
  .#{$animateName}-enter {
    .animate-layout {
      transform: translateY($offset);
      opacity: 0;
    }
    .section-mark {
      opacity: 0.01;
    }
  }

  .#{$animateName}-enter.#{$animateName}-enter-active {
    .animate-layout {
      transform: translateY(0);
      opacity: 1;
      transition: all $duration ease;
    }
    .section-mark {
      opacity: 1;
      transition: opacity $duration ease;
    }
  }

  .#{$animateName}-exit {
    .animate-layout {
      transform: translateY(0);
      opacity: 1;
    }
    .section-mark {
      opacity: 1;
    }
  }

  .#{$animateName}-exit.#{$animateName}-exit-active {
    .animate-layout {
      transform: translateY($offset);
      opacity: 0.01;
      transition: all $duration ease;
    }
    .section-mark {
      opacity: 0.01;
      transition: opacity $duration ease;
    }
  }
}

// modal
@include modal(modal, 20px);

// drop-menu
.drop-menu-enter {
  opacity: 0.01;
  transform: translateY(-5px);
}

.drop-menu-enter.drop-menu-enter-active {
  transform: translateY(0);
  opacity: 1;
  transition: transform $notifyTransDuration ease, opacity $notifyTransDuration ease;
}

.drop-menu-exit {
  opacity: 1;
  transform: translateY(0);
}

.drop-menu-exit.drop-menu-exit-active {
  opacity: 0.01;
  transform: translateY(-5px);
  transition: transform $notifyTransDuration ease, opacity $notifyTransDuration ease;
}

// notify
.notify-enter {
  opacity: 0.01;
  transform: translateX(20%);
}

.notify-enter.notify-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: transform $notifyTransDuration easeInOut, opacity $notifyTransDuration easeInOut;
}

.notify-exit {
  opacity: 1;
  transform: translateX(0);
}

.notify-exit.notify-exit-active {
  opacity: 0.01;
  transform: translateX(20%);
  transition: transform $notifyTransDuration easeInOut, opacity $notifyTransDuration easeInOut;
}

// fade
.fade-enter {
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity $fadeTransDuration ease;
}

.fade-exit {
  opacity: 1;
}

.fade-exit.fade-exit-active {
  opacity: 0.01;
  transition: opacity $fadeTransDuration ease;
}

// popover
.popover-enter {
  opacity: 0.01;
  transform: translateX(20px);
}

.popover-enter.popover-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all $popoverTransDuration ease;
}

.popover-exit {
  opacity: 1;
  transform: translateX(0);
}

.popover-exit.popover-exit-active {
  opacity: 0.01;
  transform: translateX(20px);
  transition: all $popoverTransDuration ease;
}

// loading
.loading-enter {
  opacity: 0.01;
  .loading-container {
    position: absolute !important;
  }
}

.loading-enter.loading-enter-active {
  opacity: 1;
  transition: opacity $loadingTransDuration ease;
  .loading-container {
    position: absolute !important;
  }
}

.loading-exit {
  opacity: 1;
  .loading-container {
    position: absolute !important;
  }
}

.loading-exit.loading-exit-active {
  opacity: 0.01;
  transition: opacity $loadingTransDuration ease;
  .loading-container {
    position: absolute !important;
  }
}

// toast
.toast-enter {
  opacity: 0.01;
  transform: translateY(-20px);
}

.toast-enter.toast-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: transform $toastransDuration ease, opacity $toastransDuration ease;
}

.toast-exit {
  opacity: 1;
  transform: translateY(0);
}

.toast-exit.toast-exit-active {
  opacity: 0.01;
  transform: translateY(-45px);
  transition: transform $toastransDuration ease, opacity $toastransDuration ease;
}