react-router-page-transition/examples/material/less/main.less

Highly customizable page transition component for your your React Router

body {
  margin: 0px;
}

.list-item {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  color: #fff;
  &:last-child {
    margin-bottom: 0;
  }
}

.transition-wrapper {
  position: relative;
  z-index: 1;
  .transition-item {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  }
}

.detail-page {
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px 10px;
  height: 100vh;
  background-color: #03a9f4;

  a {
    color: white;
  }

  &.transition-appear {
    transition: transform 1s cubic-bezier(0.7, 0, 0.25, 1),
    left 1s cubic-bezier(0.7, 0, 0.25, 1),
      right 1s cubic-bezier(0.7, 0, 0.25, 1),
      height 1s cubic-bezier(0.7, 0, 0.25, 1);
  }

  &.transition-appear.transition-appear-active {
  }
}
.list-page {
  z-index: 2;
  box-sizing: border-box;
  padding: 20px;
  height: 100vh;
  background-color: #fff;
  transition: opacity 1s;

  &.transition-appear {
    opacity: 0.01;
  }

  &.transition-appear.transition-appear-active {
    opacity: 1;
  }
}