如何在 Blazor 中使用引导转换 .collapse

【问题标题】：How can I use bootstrap transition .collapsing with Blazor如何在 Blazor 中使用引导转换 .collapse
【发布时间】：2021-07-14 09:46:15
【问题描述】：

Here 是一个带有短暂过渡的折叠元素的简单示例。（前两个蓝色按钮。）

这是我的 HTML

<p>
    <a class="btn btn-primary" @onclick="ToggleDropdown" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
</p>
<div class="collapse @DropdownCssClass" id="collapseExample">
    <div class="card card-body">
        Anim pariatur cliche...
    </div>
</div>

这是代码

@code {
    private bool isDropdownVisible = true;
    private string DropdownCssClass => isDropdownVisible ? "collapsing" : "show";
    private void ToggleDropdown()
    {
        isDropdownVisible = !isDropdownVisible;
    }
}

div 折叠但没有过渡。如何应用过渡？

谢谢

【问题讨论】：

标签： css bootstrap-4 css-transitions blazor collapse

【解决方案1】：

在css-tricks.com 的帮助下，我使用以下代码应用了过渡

HTML

<p>
    <a class="btn btn-primary" @onclick="ToggleDropdown" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
</p>
<div class="transition-visible @DropdownCssClass" id="collapseExample">
    <div class="card card-body">
        Anim pariatur cliche...
    </div>
</div>

@code { private bool isDropdownVisible = false;
private string DropdownCssClass => isDropdownVisible ? "show" : "transition-collapsed";
private void ToggleDropdown()
{
    isDropdownVisible = !isDropdownVisible;
} }

CSS

.transition-visible {
    overflow: hidden;
    transition: transform 0.3s ease-out;
    height: auto;
    transform: scaleY(1);
    transform-origin: top;
}

    .transition-visible.transition-collapsed {
        transform: scaleY(0);
    }

【讨论】：

像魅力一样工作。