Angular-ui-bootstrap 手风琴和折叠动画不起作用

Posted 2023-02-22

【中文标题】Angular-ui-bootstrap 手风琴和折叠动画不起作用

【英文标题】：Angular-ui-bootstrap accordion and collapse animation not working

【发布时间】：2015-10-28 16:07:39

【问题描述】：

在 angular-ui-bootstrap demo/docs page 上，accordion 和 collapse 指令在单击项目时都具有动画效果。

但是，动画在该页面上的 plunker 演示中不起作用。是缺少某些依赖还是可能的错误？

（在 chrome / firefox 中测试）

更新：

我在 2015 年 10 月 29 日更新到 0.14.3 版，现在一切正常。感谢 angularUI 团队的辛勤工作！

【问题讨论】：

这不是错误，在 0.13 版本中，您需要在应用程序中包含 ngAnimate。此外，plunkers 正在制作动画

【参考方案1】：

从 0.13 版开始，您需要在您的应用程序中包含 ngAnimate：

bower install angular-animate --save

添加对 index.html 的脚本引用（例如 grunt wiredep）：

<script src="vendor/angular-animate/angular-animate.js"></script>

将模块引用添加到您的 Angular 应用程序，例如：

angular.module('app', ['ngCookies', 'ngRoute', 'ngSanitize', 'ngAnimate']);

【讨论】：

是的。当时我有 ng-animate 。这是 0.13.xx 版本的内部问题，现已解决。

添加 ngAnimate 后它开始为我工作。我正在使用angular-ui.github.io/bootstrap/versioned-docs/0.13.3/#/…

我使用的是 2.5.x 版的 ui-bootstrap，之前我使用的是 0.12.x。动画在我使用 0.12.x 时有效，如上所述，我已经单独包含了 ui-bootstrap-tpls。升级后，作者似乎自动包含了 ui-bootstrap-tpls。所以这不是问题。但是，直到我添加了 ngAnimate，它才正常工作。谢谢你！它救了我的培根。

【参考方案2】：

bootstrap-ui 0.13 版本存在一个错误 只需改回 0.12，如下所示：

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

【讨论】：

正确！我使用的是 0.13 版本。感谢您的帮助。

下面@mvermand 提供的答案现在是正确的。