如何使用 AngularJS 为 div 高度变化设置动画

Question

我有一个 div，其中包含来自 RSS 提要的文章标题。这使得 div 大小动态取决于正在查看的提要、文章标题的长度等。我想让 div 高度的变化成为一个平滑的动画，就像你看到的 here 一样，除了使用 angularJS 而不是 jQuery。

我用 Angular 完成的唯一动画只是使用淡入淡出文本类型的东西

ng-enter{opacity:0;} ng-enter-active{opacity:1;}

这相当简单，所以希望这也是如此。

Answer 1

简单示例，基于 ngAnimate 对添加和删除类的固有监控。定义 3 个 CSS 类：

.transformable {
    -webkit-transition: height 100ms linear;
    -moz-transition: height 100ms linear;
    -o-transition: height 100ms linear;
    -ms-transition: height 100ms linear;
    transition: height 100ms linear;

}

.small {
    height:100px;
}

.big {
    height:300px;
}

并声明你的 div ：

<div class="transformable" ng-class="{'small':isSmall, 'big':!isSmall}" ng-click="isSmall = !isSmall"> </div>

这应该会在单击时为您提供大小变化的 div：角度检测小/大类的添加/删除，并根据可转换的 css 类值激活动画。 您可以使用其他动画就绪指令（例如 ng-repeat）做类似的事情或创建您的自定义行为。 jessegavin 的文章似乎是这方面的一个很好的入门读物。