$transition-duration: 500ms;


.nav-item {
  display: none;

  &.shown {
    display: block;
  }
  &[animate] {
    display: block;
    transition: $transition-duration linear;
  }

  &[animate=enter] {
    transform: translate3d(100%,0,0);
    &.start {
      transform: translate3d(0,0,0);
    }
  }
  &[animate=enter-reverse] {
    transform: translate3d(-100%,0,0);
    &.start {
      transform: translate3d(0,0,0);
    }
  }
  &[animate=leave-reverse] {
    transform: translate3d(0,0,0);
    &.start {
      transform: translate3d(-100%,0,0);
    }
  }
  &[animate=leave] {
    transform: translate3d(0,0,0);
    &.start {
      transform: translate3d(100%,0,0);
    }
  }
}