是否可以使用ng样式的动画？ （AngularJS）

Question

我使用AngularJS的ng样式属性将div设置为动态高度option.height。

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

当加载页面时，高度可设置为从0像素什么300像素，这取决于早期用户输入。虽然这有效，但我希望div高度可以从0px动画到任何值选项.height使用CSS动画，而不是从正确的高度开始。这可能吗？我应该如何处理这个问题？

Answer 1

您可以使用CSS keyframes和from属性。
这会将其设置为从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。