ng-leaveクラスが適用されない

Question

私のプロジェクトにanimate.cssとAngular.JSを使用しています。私はあなたがここに見つけることができるcodepenを作成しました：http://codepen.io/SassyCrafter/pen/NrRbmE。以下のCSS（私はSASSを使用していますPS）

.form-message { 
    position: absolute; 
    .message { 
    position: absolute; 
    color: white; 
    background: orange; 
    padding: 5px; 
    position: absolute; 
    white-space: nowrap; 
    border-radius: .20rem; 
    z-index: 1001; 
    } 

    &.ng-leave { 
    animation: fadeOut 300ms;  
    } 
} 

あなたはペンを見ている場合は、メールが有効でない場合それが必要のように、それがフェードインすることがわかります。しかし、電子メールが有効でフェードアウトすると、ちょっとだけアイドル状態になり、突然消えます。どんな助けもありがとう。

Answer 1

よりよい解決策が見つかりアップデート2

• ：

は交換してください -で

<div class="form-message animated" 
    ng-class="{'fadeIn': !emailForm.email.$valid, 
      'fadeOut': emailForm.email.$valid}"> 

から

を

<div class="form-message fade" 
    ng-class="{'in': form.email.$invalid}"> 

• 更新例
• サイドノート：私の提供の例を見ては、提出押してみてください。 Bootstrapはすでに無効なフィールドにツールチップの検証サマリを適用していることに気づくでしょう。 Bootstrapの組み込み機能であるため、これを代わりに使用することを検討してください。 More info.

---

更新

working example from supplied code作成しました。

---

ng-show/ng-hideにアニメーション化することができないdisplay: none !important;を適用します。

fadeInとfadeOutのクラスを一緒に使用して、ng-classを代わりに使用することができます。

<div class="form-message animated fadeIn" ng-show="!emailForm.email.$valid"> 

で - -

<div class="form-message animated" 
    ng-class="{'fadeIn': !emailForm.email.$valid, 
      'fadeOut': emailForm.email.$valid}"> 

をそして、あなたの&.ng-leave SCSSを削除

を交換してください。