是否可以使用ng-style的动画？ （AngularJS）

Question

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

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

加载页面时，高度可以设置为0px到300px之间的任何值，具体取决于之前的用户输入。虽然这有效，但我希望div高度从0px动画到任意值选项。高度使用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>

编辑：添加了keyframes的所有供应商细节。