ng形式のアニメーションは可能ですか？ （AngularJS）

Question

AngularJSのngスタイルの属性を使用して、option.heightと呼ばれる動的な高さにdivを設定しました。

<div class="rec" ng-style="{ 'height': option.height, 'background-color': option.color}"></div> 

ページが読み込まれるとき、以前のユーザー入力に応じて、高さは0pxから300pxのいずれかに設定されます。これは動作しますが、divの高さを0pxから正しい高さで始めるのではなく、CSSアニメーションを使用しているoption.heightの値にアニメーション化します。これは可能ですか？私はこれにどのようにアプローチすべきですか？

Answer 1

fromプロパティのCSS keyframesを使用できます。
0pxから指定された高さにアニメーションします。

ような何か：

@keyframes AnimHeight{ 
    from{ 
    height:0px; 
    } 
} 

例：

.res { 
 
    animation: AnimHeight 0.5s ease; 
 
} 
 

 
@-webkit-keyframes AnimHeight { 
 
    from { 
 
    height: 0px; 
 
    } 
 
} 
 

 
@-moz-keyframes AnimHeight { 
 
    from { 
 
    height: 0px; 
 
    } 
 
} 
 

 
@-o-keyframes AnimHeight { 
 
    from { 
 
    height: 0px; 
 
    } 
 
} 
 

 
@keyframes AnimHeight { 
 
    from { 
 
    height: 0px; 
 
    } 
 
}

<div class="res" style="height:100px;background:red;width:100%;"> 
 
</div>

EDIT：追加されましたkeyframesのためのすべてのベンダーの仕様。