Javascript Bootstrap/JS折叠滞后且无动画

我有一个表，其中的行可以折叠，当我点击按钮切换折叠时，我会看到字体可怕的图标立即更新，但折叠几乎在半秒钟内没有发生。当塌陷发生时，它只是立即跳到其最终位置，而不是使用动画。它几乎就像是在运行一个动画，而不是正在显示。即使将.collasing选择器更改为无转换，也会存在此延迟

这是HTML

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.funcName)
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
    @for (int i = 0; i < Model.Count(); i++)
    {
        <tr>
            <td class="hiddenField funcID">
                @Model.ElementAt(i).funcID
            </td>
            <td class="funcName col-md-1">
                @Html.DisplayFor(modelItem => Model.ElementAt(i).funcName)
            </td>
            <td class="row-actions col-md-1">
                <div class="btn-group">
                    <button type="button" class="btn btn-default editFuncButton">Edit</button>
                    <button type="button" class="btn btn-default deleteFuncButton">Delete</button>
                </div>
                <i class="btn btn-toolbar fa fa-chevron-right expandFuncButton" data-target="#extraInfo_@i"></i>
            </td>
        </tr>
        <tr id="extraInfo_@i" class="collapse out">
            <td colspan="5">
                <div class="argsList">
                    @Html.Action("Index", "Args", new { funcID = Model.ElementAt(i).funcID })
                </div>
            </td>
        </tr>
    }
</tbody>

这是我尝试应用的CSS。折叠以删除转换

.collapsing
{
    -webkit-transition: none;
    transition: none;
    display: none;
}

---

页面上的所有数据和类似内容都有效，除了这个小问题之外，折叠几乎有效。

您的问题在这一行：

transition: none;

默认值必须是，要更改它，您需要设置重要值：

.collapsing {
   transition: unset !important;
}

在任何情况下，我建议直接处理事件：。通过这种方式，您完全可以克服过渡：

$('[id^=extraInfo_]').on('show.bs.collapse hide.bs.collapse', function(e) {
    $(this).toggle();
})

（'show.bs.collapse hide.bs.collapse'，函数（e）{ $（this.toggle（）； }) $（文档）。在（“单击“，”.expandFuncButton'，函数（） { $（this）.toggleClass（'fa-chevron-right fa-chevron-down'） $（$（this.attr（“数据目标”））.collapse（“切换”）； });

（姓名）
funcID
（姓名）
编辑
删除
1

1

1

funcID
（姓名）
编辑
删除
1

1

1

您的问题在这一行：

transition: none;

默认值必须是，要更改它，您需要设置重要值：

.collapsing {
   transition: unset !important;
}

在任何情况下，我建议直接处理事件：。通过这种方式，您完全可以克服过渡：

$('[id^=extraInfo_]').on('show.bs.collapse hide.bs.collapse', function(e) {
    $(this).toggle();
})

（'show.bs.collapse hide.bs.collapse'，函数（e）{ $（this.toggle（）； }) $（文档）。在（“单击“，”.expandFuncButton'，函数（） { $（this）.toggleClass（'fa-chevron-right fa-chevron-down'） $（$（this.attr（“数据目标”））.collapse（“切换”）； });

（姓名）
funcID
（姓名）
编辑
删除
1

1

1

funcID
（姓名）
编辑
删除
1

1

1

直接处理对我有效的事件，崩溃现在快得多。直接处理对我有效的事件，崩溃现在快得多。