Question

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

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

1 个答案: