引导动画不起作用答案

【问题标题】：Bootstrap animations not working引导动画不起作用
【发布时间】：2016-01-17 21:54:58
【问题描述】：

我是 Angular/Bootstrap 的新手，我下载了一个模板，我正在尝试修改和添加功能以进行学习。

我正在尝试有一个可折叠的子菜单

<ul class="nav nav-sidebar">
    <li ng-class="{active: $state.includes('overview')}"><a ui-sref="overview">Overview <span class="sr-only">(current)</span></a></li>
    <li><a href="" data-toggle="collapse" data-target="#products">Products</a></li> <!-- a click on this should expand the div below... --> 
    <div class="collapse" id="products">
        <ul>
             <div ng-repeat="itemType in itemTypes">
                <li><a href="" class="list-group-item">{{itemType.Description}}</a></li>
             </div>
        </ul>
    </div>
</ul>

我的尝试来自this example。

我希望通过单击锚点来触发动画，而不是按钮。

我看了一个版本的 Bootstrap 动画有问题所以我升级到bootstrap#3.3.6

有什么想法吗？

谢谢。

编辑：我的意思是不工作，什么都没有发生。我可以使用ng-show 指令，但没有流畅的动画。

【问题讨论】：

您是否像链接到的示例一样引入collapse.js？ Angular 中的内置动画是用 CSS 定义的，而不是 JS。
我不认为我是。我应该手动编辑bower.json 文件还是有安装它的命令？我试过bower install bootstrap-collapse，说没有这样的包。

标签： javascript css angularjs twitter-bootstrap

【解决方案1】：

正如docs 所说，

您可以使用带有href 属性的链接，或带有data-target 属性的按钮。在这两种情况下，data-toggle="collapse" 都是必需的。

更改锚标记以使用href 属性而不是data-target。

<a href="#products" data-toggle="collapse">Products</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav nav-sidebar">
    <li ng-class="{active: $state.includes('overview')}"><a ui-sref="overview">Overview <span class="sr-only">(current)</span></a></li>
    <li><a href="#products" data-toggle="collapse">Products</a></li> <!-- a click on this should expand the div below... --> 
    <div class="collapse" id="products">
        <ul>
             <div ng-repeat="itemType in itemTypes">
                <li><a href="" class="list-group-item">{{itemType.Description}}</a></li>
             </div>
        </ul>
    </div>
</ul>

【讨论】：

【解决方案2】：

我最终将 jQuery 和 bootstrap 添加到我的 'serve' gulp 任务中，这很有效，根本没有更改视图的代码。

【讨论】：