.simpleFade {
  &-appear {
    opacity: 0;
    &.simpleFade-appear-active {
      transition: opacity 200ms ease;
      opacity: 1;
    }
  }
  &-enter {
    opacity: 0;
    &.simpleFade-enter-active {
      transition: opacity 200ms ease;
      opacity: 1;
    }
  }
  &-leave {
    opacity: 1;
    &.simpleFade-leave-active {
      transition: opacity 200ms ease;
      opacity: 0;
    }
  }
}

.scaleFadeTop {
  &-appear {
    opacity: 0;
    transform-origin: top center;
    transform: scale(0.8);
    &.scaleFadeTop-appear-active {
      transition: opacity 400ms ease, transform 200ms ease;
      opacity: 1;
      transform: scale(1);
    }
  }
  &-enter {
    opacity: 0;
    transform-origin: top center;
    transform: scale(0.8);
    &.scaleFadeTop-enter-active {
      transition: opacity 400ms ease, transform 200ms ease;
      opacity: 1;
      transform: scale(1);
    }
  }
  &-leave {
    opacity: 1;
    transform-origin: top center;
    transform: scale(1);
    &.scaleFadeTop-leave-active {
      transition: opacity 200ms ease, transform 300ms ease;
      opacity: 0;
      transform: scale(0.8);
    }
  }
}

.flipFadeTop {
  &-appear {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg) perspective(100px);
    &.flipFadeTop-appear-active {
      transition: opacity 400ms ease, transform 300ms ease;
      opacity: 1;
      transform: none;
    }
  }
  &-enter {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg) perspective(100px);
    &.flipFadeTop-enter-active {
      transition: opacity 400ms ease, transform 300ms ease;
      opacity: 1;
      transform: none;
    }
  }
  &-leave {
    opacity: 1;
    transform-origin: top center;
    transform: none;
    &.flipFadeTop-leave-active {
      transition: opacity 200ms ease, transform 300ms ease;
      opacity: 0;
      transform: rotateX(90deg) perspective(100px);
    }
  }
}

.slideDown {
  &-enter {
    top: -200px;
    &.slideDown-enter-active {
      transition: top 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
      top: 0;
    }
  }
  &-leave {
    top: 0;
    &.slideDown-leave-active {
      transition: top 200ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
      top: -200px;
    }
  }
}