javascript - Bootstrap 崩溃 : no closing animation

Question

我正在与 ng-repeat 一起实现 Bootstrap collapse。我有两种实现方式，一种是两个动画都在工作，另一种是只有打开的动画在工作。可折叠元素的关闭没有动画，它只是立即收缩。两种实现之间的区别在于，工作的没有嵌套的 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>

Answer 1

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

要测试它，添加样式规则:

.instance { float:none; }

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