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

【问题标题】：Are animations with ng-style possible? (AngularJS)ng风格的动画可以吗？ (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 动画，而不是从正确的高度开始。这可能吗？我应该如何处理这个？

【问题讨论】：

标签： javascript html css angularjs css-transitions

【解决方案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 的所有供应商详细信息。

【讨论】：