@include b(modal) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: $mask-background-color;
}

@include b(popup) {
  position: fixed;
  top: 50%;
  left: 50%;
  overflow-y: auto;
  max-height: 100%;
  -webkit-overflow-scrolling: touch;
  transform: translate3d(-50%,-50%,0);
  &-top {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    transform: translate3d(0,0,0);
  }
  &-right {
    top: 0;
    right: 0;
    bottom: auto;
    left: 50%;
    transform: translate3d(-50%,0,0);
  }
  &-bottom {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translate3d(0,0,0);
  }
  &-left {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    transform: translate3d(0,0,0);
  }
}

/* 从上划入动画 */
.top-enter-active,
.top-leave-active {
  transition: $all-transition;
}
.top-enter,
.top-leave-to {
  transform: translate3d(0,-100%,0);
}

/* 从右边划入动画 */
.right-enter-active,
.right-leave-active {
  transition: $all-transition;
}
.right-enter,
.right-leave-to {
  transform: translate3d(100%,0,0);
}

/* 从下边划入动画 */
.bottom-enter-active,
.bottom-leave-active {
  transition: $all-transition;
}
.bottom-enter,
.bottom-leave-to {
  transform: translate3d(0,100%,0);
}

/* 从左边划入动画 */
.left-enter-active,
.left-leave-active {
  transition: $all-transition;
}
.left-enter,
.left-leave-to {
  transform: translate3d(-100%,0,0);
}