ngAnimate transition Sass mixins which work for both ng-if and ng-show

_ng-animate-helper.sass

// ngAnimate helper mixins

// first it helps to have a single transition for everything. you can always fine-tune later:
$base-transition: 0.5s ease all


// this set of mixins which works for both ng-if and and ng-show:

@mixin revealTo($transition: $base-transition)
  @content
  // this is the state the element should animate towards and stay in after the animation.
  // now we define the angular specific classes for ng-show and ng-if. This is where the animation is running *towards*:
  &.ng-enter.ng-enter-active, &.ng-hide-remove, &.ng-hide-add, &.ng-leave
    @content
    transition: $transition
    display: block !important 
@mixin revealFrom($transition: $base-transition)
  // at last, we define where the animation is running from:
  &.ng-enter, &.ng-hide, &.ng-leave.ng-leave-active
    @content
    transition: $transition


// call the mixins in any element like this with default transition values:
.my-special-animation
  +revealTo
    opacity: 1
  +revealFrom
    opacity: 0

// or specify custom transitions on call and animate multiple attributes at once:

+revealTo(1s linear all)
  opacity: 1
  background-color: red
+revealFrom(2s bicubic all)
  opacity: 0
  background-color: yellow