typed-catch-of-the-day/css/_animations.styl

typescript version of wes bos' catch of the day app

/*
  Possible Animations:
  enter
  leave
  appear Must set transitionAppear={true} on animation component
*/

.order-enter
  transition all 0.5s
  transform translateX(-120%)
  max-height 0
  padding 0 !important
  &.order-enter-active
    max-height 60px
    padding 2rem 0 !important
    transform translateX(0)

.order-leave
  transition all 0.5s
  transform translateX(0)
  &.order-leave-active
    max-height 0
    padding 0
    transform translateX(120%)

.count-enter
  transition all 0.25s
  transform translateY(100%)
  &.count-enter-active
    transform translateY(0)

.count-leave
  transition all 0.25s
  left 0
  bottom 0
  transform translateY(0)
  position absolute
  &.count-leave-active
    transform translateY(-100%)