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

发布时间：2020-12-17 07:42:44 所属栏目：安全来源：网络整理

导读：我有一个div,其中包含RSS提要中的文章标题.这使得div大小动态取决于正在查看的饲料,文章标题的长度等.我想使div高度的变化是一个平滑的动画,如你所看到的 here,除了使用angularJS而不是jQuery. 与Angular完成的唯一动画就是使用淡入淡出的文字类型的东西 ng-

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!