我有一个 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: Angular 检测小/大类的添加/删除,并根据可转换的 css 类值激事件画。
您可以使用其他动画就绪指令(例如 ng-repeat)做类似的事情或创建您的自定义行为。 jessegavin 的文章似乎是这方面的一个很好的入门读物。
关于angularjs - 如何使用 AngularJS 为 div 高度变化设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21143702/