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

Question

我有一个包含来自RSS提要的文章标题的div.这使得div大小动态取决于正在查看哪个Feed,文章标题的长度等.我想使div高度的变化是一个平滑的动画,就像你在这里看到的,除了使用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:angular检测小/大类的添加/删除,并根据可转换的css类值激活动画.您可以使用其他动画就绪指令(例如ng-repeat)执行类似操作或创建自定义行为.来自jessegavin的文章似乎是一个很好的入门.