web-dev-qa-db-ja.com

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

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

私がAngularで行った唯一のアニメーションは、フェードインフェードアウトテキストタイプのものです。

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

これはかなり単純だったので、うまくいけばこれもそうなるでしょう。

angularjsanimation
16
Hoser

クラスの追加と削除のngAnimate固有の監視に基づく簡単な例。 3つのcssクラスを定義します。

.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を宣言します：

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

これにより、クリックするとサイズが変化するdivが得られます：angular小さい/大きいクラスの追加/削除を検出し、変換可能なcssクラス値に基づいてアニメーションをアクティブにします。他のアニメーション対応でも同様のことができます。ディレクティブ（例：ng-repeat）またはカスタム動作を作成します。jessegavinの記事は、これに関する優れた入門書のようです。

24
Sycomor