如何使用AngularJS为div高度变化设置动画 [英] How to animate a div height change with AngularJS

问题描述

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

I have a div which contains article titles from an RSS feed. This makes the div size dynamic depending on which feed is being looked at, length of article titles, etc. I would like to make the change in div height be a smooth animation like you see here, except using angularJS instead of jQuery.

我对Angular所做的唯一动画只是淡入淡出

The only animation I've done with Angular is just a fade-in fade-out text type stuff using

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

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

Which was fairly simple, so hopefully this will be as well.

推荐答案

一个简单的示例，基于ngAnimate对添加和删除类的先天监视。定义3个CSS类：

Simple example, based on ngAnimate innate monitoring of adding and removing classes. Define 3 css classes :

.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的文章似乎是这方面的不错入门。

This should give you size-changing div on click : angular detects addition/removal of small/big classes and activates animation based on transformable css class values. You can do similar things with other animation-ready directives (e.g. ng-repeat) or create your custom behaviours. The article from jessegavin seems like a good primer on this.

这篇关于如何使用AngularJS为div高度变化设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！