使用angular-ui-bootstrap的collapse的时候,缓动动画无法播放的问题
程序员文章站
2022-07-13 08:54:53
...
在使用ui-bootstrap的时候,试用了collapse这个组件,但是发现缓动动画一直无法播放
直接解决问题,可翻至最后,想进行分析调试,可看中间过程。
翻看源码,ui-bootstrap的源码最上就是uibCollapse的源码(我是用的版本是1.0,与之前的0.x版本源码有很大出入)
在源码中,坚挺了uibCollapse的值,当值发生变化,则会分别调用expand()或者collapse()进行展开或关闭,此处断点一切正常。
在方法内,进行添加相应的class进行添加样式,此处发现也一切正常。
在方法的最后,start()后,进行了finally的监听
此处发现finally的回调处理函数无论在动画执行多少秒,都会立刻执行,这也就是动画无法播放的问题所在。
而此处的处理,是交由代码上面生命的$animateCss变量来进行处理。
再次调试$animateCss的值,发现$injector.get('$animateCss')获取的function,是在angular.js的源码内。
这也就是问题的关键了。
此处其实提供了由用户来选择使用什么样的库来支持angular的动画,而在没有配置库的情况下,就直接调用了angular源码内的对应处理函数。
---------
所以,我最后引入了angular-animate.js,来实现动画,也就是说ui-bootstrap的动画依赖于动画库才能实现。
引入angular-animate.js以及在module中引入依赖,再次执行,问题解决了。
直接解决问题,可翻至最后,想进行分析调试,可看中间过程。
翻看源码,ui-bootstrap的源码最上就是uibCollapse的源码(我是用的版本是1.0,与之前的0.x版本源码有很大出入)
在源码中,坚挺了uibCollapse的值,当值发生变化,则会分别调用expand()或者collapse()进行展开或关闭,此处断点一切正常。
在方法内,进行添加相应的class进行添加样式,此处发现也一切正常。
在方法的最后,start()后,进行了finally的监听
此处发现finally的回调处理函数无论在动画执行多少秒,都会立刻执行,这也就是动画无法播放的问题所在。
而此处的处理,是交由代码上面生命的$animateCss变量来进行处理。
再次调试$animateCss的值,发现$injector.get('$animateCss')获取的function,是在angular.js的源码内。
这也就是问题的关键了。
此处其实提供了由用户来选择使用什么样的库来支持angular的动画,而在没有配置库的情况下,就直接调用了angular源码内的对应处理函数。
---------
所以,我最后引入了angular-animate.js,来实现动画,也就是说ui-bootstrap的动画依赖于动画库才能实现。
引入angular-animate.js以及在module中引入依赖,再次执行,问题解决了。
上一篇: 记录一次使用DBLINK数据迁移