angularjs - 別の要素をフェードインする前に要素を完全にフェードアウトする

Question

このjsfiddleからわかるように：

http://jsfiddle.net/robcampo/pWGuS/

Angular アニメーションを使用して要素をフェードアウトし、別の要素をフェードアウトしようとしています。

フェード (不透明度とトランジションを使用) が機能します。ただし、ご覧のとおり、現在表示されている要素を非表示にする前に、以前に非表示にした要素を表示します。これにより、両方の要素が同時に表示されます。

質問

2 番目の要素を表示する前に、最初の要素が完全に非表示になるまで待機する方法はありますか? カスタム ディレクティブを使用してこれを実行できることは確かですが、そのルートをたどる前に、すぐに使用できる方法がないことを確認したいと思います。

私が試したこと

a) フェード インする要素に遷移遅延を設定します。

.ng-hide-remove {
    -webkit-transition: all 1s ease 1s;
    transition: all 1s ease 1s;
    opacity: 0;
}

b) 高さのプロパティを使用する

アプリで非表示にしている div はグリッド システムの一部であるため、これはうまくいきません。

ノート

これを jQuery で実装するとしたら、次のようになります。

elementToFadeOut.fadeOut(1000, function() {

    elementToFadeIn.fadeIn(1000);

});