为什么$ animateCSS的最终和完成在UI Bootstrap Angular JS中表现不同

时间:2015-10-19 23:34:31

标签: angularjs angularjs-directive css-transitions angular-ui-bootstrap

我正在使用UI Bootstrap根据用户点击类似于官方网站中显示的示例的按钮来折叠/展开div部分 - UI Bootstrap-Collapse

我包含了最新版本的ui-bootstrap(0.14.2),但没有显示预期的行为。特别是在$ animateCSS完成动画后,永远不会调用 collapseDone() expandDone() 回调。 (动画工作正常,可能是因为类引物的css过渡属性'在twitter bootstrap中崩溃'

但是当我检查UI Bootstrap网站时,我发现它按预期正常工作。 (在动画过程中添加了课程'折叠'然后在动画后删除,然后添加课程'折叠')。所以我查看了崩溃collapse source code -github的源代码链接,发现 最后 用于$ animateCSS承诺解析而不是 已完成

那么有人可以解释$ animateCSS函数的finally方法和完成方法之间的区别吗?文档[Angular Docs- $ animateCSS] [3]说明了

  

还有一个名为.done(callbackFn)的跑步者可用的额外方法。 done方法与.finally(callbackFn)的工作方式相同,但是,它不会触发摘要。因此,出于性能原因,总是最好使用runner.done(回调)而不是runner.then(),runner.catch()或runner.finally(),除非你真的需要一个摘要来启动

所以看起来两者应该表现得相似。有人可以阐明这一点,因为似乎很少有资源可以了解$ animateCSS。 (谷歌搜索$ animateCss返回animate.css的结果,这似乎是earler angular js verion(v1.2)的一部分 - 所以这并没有帮助)

1 个答案:

答案 0 :(得分:1)

我忘了在模块中注入“ ngAnimate ”。那样$ animateCss的动画不成功,所以从未调用过done()。但即使动画不成功,也会被调用。