CSS角度jsアニメーションのulタグでのスタイル設定は有効ではないようです

Question

親アイテムの選択でサブメニュー（ul）を隠そうとしています。

子メニュ​​ーには、高さをゼロに調整するためのアニメーションが含まれています。

移行時間が経過した後にのみ子供のulアイテムが隠れているようです。あなたはあなたの経験を公開することができます

ここにCSSがありますか？

.ng-hide { 
    height: 0; 
    transition: all linear 2s; 
} 

それぞれのシンプルなHTML

<ul> 
<li>test1</li> 
<li>test1</li> 
<li >test1 <input type="checkbox" ng-model="myCheck"></li> 
<ul ng-hide="myCheck"><li>test1</li> 
<li>test1</li> 
<li>test1</li></ul> 
<li>test1</li> 
<li>test1</li> 
<li>test1</li> 
</ul> 

<script> 
var app = angular.module('myApp', ['ngAnimate']); 
</script> 

Answer 1

.ng-hide { /* CSS here */ }` 

は同様に、ng-hideクラスを有する要素にごCSSが適用されます：あなたが要素にCSSを適用する場合

<div class="ng-hide"></div> 

コードのようにng-hideディレクティブを使用すると

[ng-hide] { /* CSS here */ } 

しかし、AngularJSは ng-hideディレクティブ（ !important）のための非常に強力なセレクター/ルールを使用しています：あなたはこの CSSセレクターを使用したい（ <div ng-hide="expression"></div>）上に掲載。要素を調べ、規則が適用されるかどうか、そしてどのセレクタから来るのかを確認することをお勧めします。セレクタは特異性の点でそれらを上回る必要があるからです。