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

Highly customizable page transition component for your your React Router

body {
  margin: 0px;
}

.text-center {
  display: block;
  text-align: center;
}

.list-page {
  display: flex;

  flex-wrap: wrap;
}

.list-item {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  padding: 10px;
  width: @size;
  height: @size;
  border-radius: (@size + 20) / 2;
  color: #fff;
  text-align: center;

  @size: 100px;
}

.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;
  }

  h1 {
    margin-top: 60px;
    color: #fff
  }

  &.transition-appear {
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.25, 1),
      left 0.5s cubic-bezier(0.7, 0, 0.25, 1),
      width 0.5s cubic-bezier(0.7, 0, 0.25, 1),
      height 0.5s cubic-bezier(0.7, 0, 0.25, 1),
      border-radius 0.5s 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 0.5s;

  &.transition-appear {
    opacity: 0.01;
  }

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