//右
.right-enter {
  opacity: 0;
  transform: translateX(100%);
}
.right-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 250ms;
}

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

.right-exit-active {
  opacity: 0;
  transform: translateX(100%);
  transition: all 250ms
}

//左
.left-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.left-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 250ms;
}

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

.left-exit-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 250ms
}

//上
.top-enter {
  opacity: 0;
  transform: translateY(-100%);
}
.top-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 250ms;
}

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

.top-exit-active {
  opacity: 0;
  transform: translateY(-100%);
  transition: all 250ms
}

//下
.bottom-enter {
  opacity: 0;
  transform: translateY(100%);
}
.bottom-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 250ms;
}

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

.bottom-exit-active {
  opacity: 0;
  transform: translateY(100%);
  transition: all 250ms
}
//xx

.overflow-enter {
  opacity: 0;
}
.overflow-enter-active {
  opacity: 1;
  transition: all 250ms;
}
.overflow-exit {
  opacity: 1;
}
.overflow-exit-active {
  opacity: 0;
  transition: all 250ms
}