Javascript 引导折叠：无关闭动画

我正在实现引导折叠和

ng repeat

。我有两个实现，一个是两个动画都在工作，另一个是只有打开的动画在工作。可折叠元素的关闭不会设置动画，只是会立即收缩。这两种实现之间的区别在于，工作实现没有嵌套的

ng repeat

指令，而非工作实现有嵌套的

ng repeat

指令，最里面的子元素有弹出框。我的直觉告诉我问题就在那里。对于这个问题，我找不到任何其他问题

HTML

<div ng-repeat="bar in foo.bars">
    <h4 class="row" role="button" data-toggle="collapse" href="#bar-{{$index}}" aria-expanded="true" aria-controls="bar-{{$index}}">{{bar.name}}</h4>
    <div id="bar-{{$index}}" class="collapse in">                                                   
        <div ng-repeat="barType in bar.types">                                                          
            <div class="col-xs-1 instance" ng-repeat="barChild in barType">
                <div class="bar-subcontainer">
                    <a class="center pointer" data-toggle="popover" data-container="body" popover-placement="right" popover-template="'popover-template.html'" popover-trigger="click">
                       {{barChild.ID}}
                    </a>    
                </div>                                              
            </div>
        </div>                              
    </div>                  
</div>

<table>                                             
        <tr ng-repeat="barType in bar.types">                                                          
            <td class="col-xs-1 instance" ng-repeat="barChild in barType">
                <div class="bar-subcontainer">
                    <a class="center pointer" data-toggle="popover" data-container="body" popover-placement="right" popover-template="'popover-template.html'" popover-trigger="click">
                       {{barChild.ID}}
                    </a>    
                </div>                                              
            </td>
        </tr>
</table>

{{bar.name}
{{barChild.ID}

问题实际上是应用于每个barChild div的col-xs-1类。特别是“float:left；”样式这是遗传的

要测试它，请添加样式规则：

.instance { float:none; }

---

当然，这将修复平滑塌陷，但会破坏现有布局。也许您可以使用表布局来重新创建所需的UI。

@GPicazo提到的表实现有效

HTML

<div ng-repeat="bar in foo.bars">
    <h4 class="row" role="button" data-toggle="collapse" href="#bar-{{$index}}" aria-expanded="true" aria-controls="bar-{{$index}}">{{bar.name}}</h4>
    <div id="bar-{{$index}}" class="collapse in">                                                   
        <div ng-repeat="barType in bar.types">                                                          
            <div class="col-xs-1 instance" ng-repeat="barChild in barType">
                <div class="bar-subcontainer">
                    <a class="center pointer" data-toggle="popover" data-container="body" popover-placement="right" popover-template="'popover-template.html'" popover-trigger="click">
                       {{barChild.ID}}
                    </a>    
                </div>                                              
            </div>
        </div>                              
    </div>                  
</div>

<table>                                             
        <tr ng-repeat="barType in bar.types">                                                          
            <td class="col-xs-1 instance" ng-repeat="barChild in barType">
                <div class="bar-subcontainer">
                    <a class="center pointer" data-toggle="popover" data-container="body" popover-placement="right" popover-template="'popover-template.html'" popover-trigger="click">
                       {{barChild.ID}}
                    </a>    
                </div>                                              
            </td>
        </tr>
</table>

{{barChild.ID}

---

上面的代码嵌套在最外层的

ng repeat

和原始代码的折叠中。

您所说的一切都会发生。它修复了动画，但破坏了列布局。我想一个表是可行的，但首先我要尝试将

实例

类包装在

col-xs-1

类中。这不可行。不过，至少我现在知道问题出在哪里了。表实现成功了。我会发布一个答案。