在使用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 是一个由 AngularJS 社区开发的库,它提供了基于 Bootstrap 的组件和服务,使得在 AngularJS 应用程序中使用 Bootstrap 的 UI 组件变得更加简单和方便。这个库将 Bootstrap 的 CSS 和 ...
【标题】"前端项目-ng2-bootstrap.zip" 是一个基于Angular 2框架的前端开发资源包,其中包含了 ngx-bootstrap 库,这是一个专门为 Angular 设计的 Bootstrap 原生组件集。 【描述】"前端项目-ng2-bootstrap" 提供了...
在本文中,我们将深入探讨如何使用Angular UI Bootstrap创建一个基于组件的侧边栏菜单。Angular UI Bootstrap是一个由AngularJS社区维护的项目,它为AngularJS应用程序提供了Bootstrap组件的实现,使得开发者可以...
Bootstrap还提供了许多内置的JavaScript插件,如折叠(Collapse)、滚动spy(ScrollSpy)、模态(Modal)、轮播(Carousel)等,这些插件通过简单的数据属性和事件处理,可以轻松添加交互性。 6. **定制与扩展**:...
"ng2Bootstrap2"项目正是将这两者结合,为Angular 2+版本的开发者提供了一套便捷的工具集,用于在Angular应用中无缝集成Bootstrap的UI元素和功能。 ### Angular 2+ 知识点 1. **模块化(Modules)**:Angular 2+ ...
**AngularJS 和 Bootstrap ...综上所述,`angularJS-bs-switch` 是一个结合了 AngularJS 的动态数据绑定和 Bootstrap 的样式设计的开关按钮解决方案,为开发者提供了一种高效且易于定制的方式来实现这一常见UI元素。
Clear overwrite native media-body bootstrap class Fix jumping issue menu on landing page Fix modalInstance call from modal controller in Angular Fix missing .m class for general margin Fix sidebar-...
6. **字体图标**:Bootstrap通常与 Glyphicons 或 Font Awesome 字体图标库一起使用,这些图标库提供了大量的矢量图形,可以在任何大小的屏幕上保持清晰,非常适合用于按钮、导航和其他UI元素。 7. **性能优化**:...
5. 跨框架兼容性:除了Bootstrap,还支持Angular、Vue和React等前端框架,便于使用现代前端技术栈。 6. 强大的文档:提供详尽的使用指南和示例代码,帮助开发者快速上手和自定义模板。 总之,这个"当今最火的...
Clear overwrite native media-body bootstrap class Fix jumping issue menu on landing page Fix modalInstance call from modal controller in Angular Fix missing .m class for general margin Fix sidebar-...
- **控制器**:用于扩展视图逻辑,但现代Angular(AngularJS 2+)推荐使用服务和服务提供者。 - **模块**(`ngModule`):组织应用结构,包含依赖和服务的注册。 2. **Bootstrap**: - **CSS框架**:Bootstrap是...
本项目聚焦于使用Regularjs来重构Bootstrap,Regularjs是一个轻量级但功能强大的前端模板引擎,它融合了React和Angular的特点,提供了声明式的数据绑定和组件化。 Regularjs的核心特性包括: 1. **声明式数据绑定*...
在更高级别的抽象中,前端框架如React、Vue或Angular提供了丰富的组件库,比如React的antd、Vue的Element UI等,它们通常包含易于使用的菜单组件,可以方便地实现二级菜单。 "ExpandTabView-master"文件可能包含了...
7. **集成其他库和框架**:Bootstrap与其他JavaScript库如jQuery、Popper.js协同工作,同时也可以与Angular、React和Vue等现代前端框架结合使用,增强功能。 学习和使用Bootstrap不仅可以提升开发效率,还能确保...
6. **扩展样式**:可以进一步定制Bootstrap样式,或使用其他CSS库如Material Design Lite或Semantic UI,以实现更多样化的界面效果。 总之,AngularJS与Bootstrap结合提供了丰富的工具来创建美观且功能丰富的表格。...
在实际项目中,手风琴卡经常与其他前端框架结合使用,如Bootstrap、Angular Material、Vue UI库等,它们提供了更丰富的功能和预设样式。通过这种方式,开发者可以快速构建响应式、易于维护的常见问题页面,同时提升...
例如,Bootstrap、jQuery UI 或者 Angular Material 等都提供了现成的选项卡组件,它们支持自定义样式和交互,能帮助你快速实现垂直选项卡功能。不过,对于简单的需求,直接使用`<table>`和CSS也是一种经济且灵活的...
在实际应用中,还可以结合现代前端框架如React、Vue或Angular,利用它们提供的组件库,如Bootstrap或Element UI,快速构建出响应式和交互性强的表格。这些框架通常已经封装了各种表格功能,如数据绑定、自定义列模板...
在HTML中,虽然没有内置的TreeView元素,但可以通过JavaScript库和框架,如jQuery UI、Bootstrap或Angular Material等,来实现这个功能。 1. **基本结构与设置** TreeView的基本结构包括节点(nodes)和它们的属性...
5. **Bootstrap**: Bootstrap虽然不内置树形菜单,但可以结合其他库如`bootstrap-treeview`实现。 **四、TreeView使用指南.pdf可能涵盖的内容** 这份PDF指南可能包含了以下内容: 1. **基础概念介绍**: 如何理解...