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

Posted 2023-03-24

【中文标题】如何在 Blazor 中使用引导转换 .collapse

【英文标题】：How can I use bootstrap transition .collapsing with Blazor

【发布时间】：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 折叠但没有过渡。如何应用过渡？

谢谢

【参考方案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>

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

【讨论】：

像魅力一样工作。