ngShowの表示非表示でアニメーションさせる

ng-hideにdisplay: none !importantがかかっているので、こんな感じにかけばいいらしい。
これで、アニメ終わったらdisplay: noneしてくれるので、アニメ要素が上にかぶってタップできない、みたいなことも起きないはず。

HTML

    <div class="animation-element" ng-show="show">
      なんかなんかなんかなんかなんかなんか
    </div>

SCSS

  .animation-element {
    @include transition(150ms linear all);

    // アニメ中はblockにしてやる
    &.ng-hide-add,
    &.ng-hide-remove {
      display: block !important;
    }

    // 表示→非表示
    &.ng-hide-add {
      @include translate3d(0, 0, 0);
      opacity: 1;
    }
    &.ng-hide-add-active {
      @include translate3d(0, 20px, 0);
      opacity: 0;
    }

    // 非表示→表示
    &.ng-hide-remove {
      @include translate3d(0, 20px, 0);
      opacity: 0;
    }
    &.ng-hide-remove-active {
      @include translate3d(0, 0, 0);
      opacity: 1;
    }
  }

同じ動き

これでもOKだけど、スペックの低いスマホの場合、クラスの付け替えでチカチカする恐れあるので上のほうが安全そう。

  .animation-element {
    @include transition(150ms linear all);
    @include translate3d(0, 0, 0);
    opacity: 1;

    // アニメ中はblockにしてやる
    &.ng-hide-add,
    &.ng-hide-remove {
      display: block !important;
    }

    &.ng-hide {
      @include translate3d(0, 20px, 0);
      opacity: 0;
    }
  }