如何用AngularJS动画一个div高度变化

前端之家收集整理的这篇文章主要介绍了如何用AngularJS动画一个div高度变化前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个div,其中包含RSS提要中的文章标题.这使得div大小动态取决于正在查看的饲料,文章标题的长度等.我想使div高度的变化是一个平滑的动画,如你所看到的 here,除了使用angularJS而不是jQuery.

与Angular完成的唯一动画就是使用淡入淡出的文字类型的东西

ng-enter {opacity:0;} ng-enter-active {opacity: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重复)或创建自定义行为来执行类似的操作.来自jessegavin的文章似乎是一个很好的介绍.

猜你在找的Angularjs相关文章