AngularJSでdivの高さをアニメーション化する方法

Question

RSSフィードの記事タイトルを含むdivがあります。これはdivのサイズを動的にします。記事のタイトルの長さなど、見ているフィードに応じて動的になります。divの高さの変更は、hereのように滑らかなアニメーションにしたいと思います。ただし、jQueryの代わりにangularJSを使用します。

私は角度をやっただけのアニメーションがうまくいけば、これは同様になり、かなり単純なものでした

ng-enter{opacity:0;} ng-enter-active{opacity:1;}

を使用して、単にフェードインフェードアウトテキストタイプのものです。

Answer 1

単純な例です。ngAnimateに基づいて、クラスの追加と削除を自然に監視します。

.transformable { 
    -webkit-transition: height 100ms linear; 
    -moz-transition: height 100ms linear; 
    -o-transition: height 100ms linear; 
    -ms-transition: height 100ms linear; 
    transition: height 100ms linear; 

} 

.small { 
    height:100px; 
} 

.big { 
    height:300px; 
} 

をし、あなたのdivを宣言：3つのCSSクラスを定義し

<div class="transformable" ng-class="{'small':isSmall, 'big':!isSmall}" ng-click="isSmall = !isSmall"> </div> 

これは与える必要がありますサイズ変更クリックでのdiv：角度は、小型/大クラスの追加/削除を検出し、アニメーションに基づいて、アクティブに変換可能なCSSクラス値。 他のアニメーション対応のディレクティブ（例：ng-repeat）でも同様の操作を行うことも、カスタムビヘイビアを作成することもできます。 jessegavinからの記事はこれに関する良い初心者のように思えます。