如何使用AngularJS实现div高度变化的动画效果

Question

我有一个包含来自RSS源的文章标题的div。这使得根据正在查看的源、文章标题的长度等，div大小是动态的。我想使div高度的更改成为平滑的动画，就像您在此处看到的那样，只不过使用AngularJS而不是jQuery。

我在Angular中做的唯一动画只是淡入淡出文本类型的东西，使用:

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

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

- Hoser

---

这是有关AngularJS动画的最佳文章。它将向您展示所有需要了解的内容。http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html - jessegavin

那篇文章中没有出现“height”这个词（我已经读过了）。 - isherwood

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 大小：angular 检测到添加/删除 small/big 类，并根据可转换的 CSS 类值激活动画。你可以使用其他动画准备就绪的指令（例如 ng-repeat）来执行类似的操作，或者创建自定义行为。jessegavin 的文章似乎是这方面的一个很好的入门。

- Sycomor

---

有没有方法可以处理高度未知的元素？（即 height:auto;） - Trevor

@threed 你可以使用 max-height 替代。取自这个答案：https://dev59.com/THA75IYBdhLWcg3wB0VP#8331169 - eden_lane