ngAnimateはアニメーションのトランジションを行わない

Question

私は執筆中で、ある時点でアプリケーションとngAnimateの動作が停止しました。私はそれをデバッグしようとしており、ボタンを押すときにアニメーションよりも何も起こっていないこの非常に最小限の例に、私のアプリケーションを削減しています。それでも、なぜ動作していないのか分かりません。私はそれが想定されているようにngAnimateを注入しており、ソースも含めてスクリプトタグを持っています。

var searchApp = angular.module('searchApp', ['ngAnimate']) 

http://plnkr.co/edit/ZJIF6BGs0ORr3S6YnJwG?p=preview

誰もが私が間違ってやっているかを見ることができますか？アプリは今とてもシンプルなので、何か非常に明白なものでなければなりません...それを見ようと時間を費やしました。

Answer 1

この問題はCSSではAngularではなく問題です。

Here's a working version

問題1は.testiDiv .ng-hideは、このような状況では有効ではないということです、それはあなたが.ng-hideが.testiDiv内ではなく、その上にあるように期待していることを意味します。

問題2は、アニメーションが間違ったクラスにあったこと、アニメーションクラスに関連していること、角度がng-show/ng-hideを使用する要素に自動的に適用されることです。

.testiDiv { 
    background-color: black; 
    width: 100px; 
    height: 100px; 
    opacity: 1; 
} 

.testiDiv.ng-hide { 
    opacity: 0; 
} 

.testiDiv.ng-hide-add, .testiDiv.ng-hide-remove { 
    -webkit-transition:all 1s linear; 
    -moz-transition:all 1s linear; 
    -o-transition:all 1s linear; 
    transition:all 1s linear; 
}