.slide-appear, .slide-enter {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  transform: translate(100vw);
  /*overflow: hidden;*/
}

.slide-enter-active {
  animation-fill-mode: forwards;
  animation-duration: 0.7s;
  animation-name: slideInRight;
}

.slide-exit {
  transform: translate(0);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  /*overflow: hidden;*/
}

.slide-exit-active {
  animation-fill-mode: forwards;
  animation-duration: 0.7s;
  animation-name: slideOutRight;
}

.slide-exit-done {
  display: none;
  transform: translate(-100vw);
}

@keyframes slideInRight {
  from {
    transform: translate(100vw);
  }
  to {
    transform: translate(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translate(0vw);
  }
  to {
    transform: translate(-100vw);
      opacity:0;
  }
}

/* reversed slide */
.reverse-slide-appear, .reverse-slide-enter {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  /*overflow: hidden;*/
}

.reverse-slide-enter {
  transform: translate(-100vw);
}

.reverse-slide-enter-active {
  animation-fill-mode: forwards;
  animation-duration: 0.7s;
  animation-name: slideInLeft;
}

.reverse-slide-exit {
  transform: translate(0);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  /*overflow: hidden;*/
}

.reverse-slide-exit-active {
  animation-fill-mode: forwards;
  animation-duration: 0.7s;
  animation-name: slideOutLeft;
}

.reverse-slide-exit-done {
  display: none;
  transform: translate(100vw);
}

@keyframes slideInLeft {
  from {
    transform: translate(-100vw);
  }
  to {
    transform: translate(0);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translate(0vw);
  }
  to {
    transform: translate(100vw);
      opacity:0;
  }
}