您可以将ng-animate与ng-class一起用于添加和删除动画。我正在寻找在CSS3中制作一个动画,但还没有找到很好的例子与ng-class在线。所以我想知道人们是否有好的例子想要分享。
我不确定我的最终动画会是什么样子,但为了这个例子的目的,假设我只想在添加类myclass
时使div的高度逐渐增加。
<div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>
**CSS**
.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}
发布于 2014-02-04 04:36:31
我已经找到了这个问题的解决方案,所以我想我应该分享一下。
http://jsfiddle.net/nicolasmoise/XaL9r/1/
这个类的优点是它只需要两个CSS类。可以直接将CSS3 transition
属性插入到基类中。与其他ng-animate不同,我认为所有动画都是在CSS3中完成的(不会像使用ng-include等处理动画那样干扰DOM )。
我想感谢Ilan Frumer提供了他的答案的链接。他的解决方案是使用ng-show的动画,它非常类似,但与使用ng-class的动画略有不同。因此,我决定发布我的示例。
https://stackoverflow.com/questions/21261452
复制相似问题