javascript - Bootstrap/JS 折叠延迟且无动画

Question

我有一个可以折叠的行的表格，当我单击按钮切换折叠时，我看到字体很棒的图标立即更新，但折叠几乎在半秒内都没有发生。当崩溃确实发生时，它只是立即跳到最终位置，而不是使用动画。它几乎就像正在运行一个正在显示的动画。即使将 .collapsing 选择器更改为没有转换，也会存在这种延迟。

这是 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>

这是在切换时发生的 JS(我在测试时将折叠从 HTML 移到了 JS，但两种触发方法都会发生)

$(function ()
{
    $(document).on("click", '.expandFuncButton', function ()
    {
        if ($(this).hasClass('fa-chevron-right'))
        {
            $(this).removeClass('fa-chevron-right');
            $(this).addClass('fa-chevron-down');
        }
        else
        {
            $(this).removeClass('fa-chevron-down');
            $(this).addClass('fa-chevron-right');
        }
        $($(this).attr("data-target")).collapse("toggle");
    });
});

这是我尝试应用于 .collapsing 以删除过渡的 CSS

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

页面上的所有数据等都可以正常工作，除了这个小但烦人的问题之外，折叠几乎可以正常工作。

Answer 1

您的问题在这一行:

transition: none;

默认值必须是unset 并且为了更改它，您需要设置重要:

.collapsing {
   transition: unset !important;
}

无论如何，我建议直接处理事件:show.bs.collapse & hide.bs.collapse 。通过这种方式，您可以完全克服过渡:

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

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

$(document).on("click", '.expandFuncButton', function ()
{
    $(this).toggleClass('fa-chevron-right fa-chevron-down')
    $($(this).attr("data-target")).collapse("toggle");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.js"></script>


<table class="table">
    <thead>
    <tr>
        <th>
            funcName)
        </th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="hiddenField funcID">
            funcID
        </td>
        <td class="funcName col-md-1">
            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_1"></i>
        </td>
    </tr>
    <tr id="extraInfo_1" class="collapse out">
        <td colspan="5">
            <div class="argsList">
                1<br/>
                1<br/>
                1<br/>
            </div>
        </td>
    </tr>
    <tr>
        <td class="hiddenField funcID">
            funcID
        </td>
        <td class="funcName col-md-1">
            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_2"></i>
        </td>
    </tr>
    <tr id="extraInfo_2" class="collapse out">
        <td colspan="5">
            <div class="argsList">
                1<br/>
                1<br/>
                1<br/>
            </div>
        </td>
    </tr>
    </tbody>
</table>