angualrのanimationは高速でクリックを繰り返したりすると、時々ng-animateクラスが削除され切らずにのこってしまい、表示がおかしくなる問題がある。
そこでアニメーションの終了を検知して、完了後自動でng-animateクラスを削除するように設定したらanimationの挙動を修正することが出来たのでメモ。

まずはanimation終了を検知するディレクティグを定義。

coreDirectives.directive('exShow', function($animate) {
    return {
        scope: {
            'exShow': '=',
            'afterShow': '&',
            'afterHide': '&'
        },
        link: function(scope, element) {
            scope.$watch('exShow', function(show, oldShow) {
                if (show) {
                    $animate.removeClass(element, 'ng-hide', scope.afterShow);
                }
                if (!show) {
                    $animate.addClass(element, 'ng-hide', scope.afterHide);
                }
            });
        }
    }
});

次にビュー側で用意したトリガーに関数をバインドする。

<div class="top-search-section" ex-show="sarchSection" after-hide="doneAnimate('top-search-section')"></div>

として、コントローラーでこうする。

$scope.toggleSearchSection = function() {
    $scope.sarchSection = $scope.sarchSection ? false : true;
}

$scope.doneAnimate = function(className) {
    $('.' + className).removeClass('ng-animate')
}

アニメーション終了後、doneAnimateが動作して、指定された要素の「ng-animate」クラスが削除されるという流れ。