ng风格的动画可以吗？ (AngularJS)

Posted 2023-03-06

【中文标题】ng风格的动画可以吗？ (AngularJS)

【英文标题】：Are animations with ng-style possible? (AngularJS)

【发布时间】：2017-11-05 20:45:34

【问题描述】：

我使用 AngularJS 的 ng-style 属性将一个名为 option.height 的 div 设置为动态高度。

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

加载页面时，高度可以设置为 0px 到 300px 之间的任意值，具体取决于之前的用户输入。虽然这可行，但我希望 div 高度从 0px 动画到任何值 option.height 正在使用 CSS 动画，而不是从正确的高度开始。这可能吗？我应该如何处理这个？

【参考方案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>

编辑：添加了keyframes 的所有供应商详细信息。