我有一个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的文章似乎是一个很好的介绍.