react-view-router/transition/es/router-view.css

react-view-router

/* slide */
.react-view-router-slide-left-enter {
  position: absolute;
  left: 100%;
  bottom: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  box-shadow: -3px -1px 12px 0px rgba(127,132,146,0.45);
}
.react-view-router-slide-left-enter-active {
  left: 0;
  transition: left 300ms;
}
.react-view-router-slide-right-exit {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  box-shadow: -3px -1px 12px 0px rgba(127,132,146,0.45);
}
.react-view-router-slide-right-exit-active {
  left: 100%;
  transition: left 300ms;
}

/* fade */
.react-view-router-fade-enter {
  opacity: 0;
}
.react-view-router-fade-exit {
  opacity: 1;
}
.react-view-router-fade-enter-active {
  opacity: 1;
}
.react-view-router-fade-exit-active {
  opacity: 0;
}
.react-view-router-fade-enter-active,
.react-view-router-fade-exit-active {
  transition: opacity 100ms;
}

/* carousel */
.react-view-router-carousel-left-enter {
  position: absolute;
  left: 100%;
  bottom: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
}
.react-view-router-carousel-left-enter-active {
  left: 0;
  transition: left 300ms;
}
.react-view-router-carousel-left-exit {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
}
.react-view-router-carousel-left-exit-active {
  left: -100%;
  transition: left 300ms;
}

.react-view-router-carousel-right-enter {
  position: absolute;
  left: -100%;
  bottom: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
}
.react-view-router-carousel-right-enter-active {
  left: 0;
  transition: left 300ms;
}
.react-view-router-carousel-right-exit {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
}
.react-view-router-carousel-right-exit-active {
  left: 100%;
  transition: left 300ms;
}