在使用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中引入依赖,再次执行,问题解决了。
分享到:
相关推荐
angular-ui-bootstrap源码与demo完整版
mobile-angular-ui-1.3.3,那个 mobile-angular-ui中文版 无法下载
Angular-ej2-angular-ui-components.zip,SyncFusion Angular UI组件库为构建现代Web应用程序提供了50多个跨浏览器、响应灵敏且轻量级的Angular UI控件。SyncFusion Angular UI组件库(Essential JS 2),Angularjs于...
angular-bootstrap-confirm, 显示 Bootstrap 确认 popover ( 没有jQuery或者 Bootstrap JS ) ! Angular Bootstrap 确认 table-内容关于安装工具文档文档演示工具开发工具许可协议单击元素时显示 Bootstrap 样式确认...
前端项目-angular-ui-sortable,此指令允许您对jqueryui排序。
前端项目-angular-ui-calendar,arshaw完整日历的完整AngularJS指令。
前端项目-angular-ui-tinymce,此指令允许您向表单元素添加tinymce。
前端项目-angular-ui-bootstrap,引导程序的本地AngularJS(角度)指令。占地面积小(5KB gzip!),不需要第三方JS依赖项(jquery、bootstrap JS)!
angular、ui-bootstrap-tpls分页 angular、ui-bootstrap-tpls分页 angular、ui-bootstrap-tpls分页 angular、ui-bootstrap-tpls分页 angular、ui-bootstrap-tpls分页
前端项目-angular-ui-router,基于状态的AngularJS路由
前端项目-angular-ui-codemirror,此指令允许您向textfarea元素添加codemirror。
前端项目-angular-block-ui,允许您阻止Ajax请求上的用户交互的AngularJS模块。
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件。 1. 关于ng-router(angular-router.js)和ui-router(angular-ui-router.js)的区别 ngroute是用AngularJS框架的路由的...
Angular-ng-bootstrap.zip,角驱动bootstrapng bootstrap-角驱动bootstrap小部件,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发...
rails-angular-postgres-and-bootstrap-second-edition 英文原版
前端项目-angular-ui-validate,NGModel的通用验证程序。
Angular UI 树 Angular UI Tree 是一个 AngularJS UI 组件,可以对嵌套列表进行排序,提供拖放支持并且不依赖于 jQuery。 如果您是使用angular-nestedSortable的用户,这是 。特征使用原生 AngularJS 范围进行数据...
UI-Router被认为是AngularUI为开发者提供的最实用的一个模块,它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染,而不是仅仅只改变路由(传统AngularJS应用实用的方式)。该模块为开发者...
前端项目-angular-ui-tree,一个AngularJS用户界面组件,可以对嵌套列表进行排序,提供拖放支持,不依赖jQuery。
State-based routing for AngularJS 1.x; version v1.0.15