cra-template-doly/template/src/components/AnimatedRoutes/index.less

[![npm][npm]][npm-url] 

.route-group {
  --transition: transform 0.3s;

  &-item {
    position: absolute;
    overflow: hidden;
    inset: 0;
  }

  &-forward &-item {
    &-enter {
      transform: translate3d(100%, 0, 0);
    }
    &-enter-active {
      z-index: 2;
      transform: translate3d(0, 0, 0);
      transition: var(--transition);
    }
    &-exit {
      transform: translate3d(-20%, 0, 0);
      transition: var(--transition);
    }
  }

  &-backward &-item {
    &-enter {
      transform: translate3d(-20%, 0, 0);
    }
    &-enter-active {
      transform: translate3d(0, 0, 0);
      transition: var(--transition);
    }
    &-exit {
      transform: translate3d(100%, 0, 0);
      transition: var(--transition);
    }
    &-exit-active {
      z-index: 2;
    }
  }
}