如何将引导过渡 .collapsing 与 Blazor 一起使用

Question

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

这是我的 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 折叠但没有过渡。如何应用过渡？

谢谢

Answer 1

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

超文本标记语言

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

C＃

@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);
    }