How can I use bootstrap transition .collapsing with Blazor

Question

Here is a simple example of a collapsing element with a short transition. (The first two blue buttons.)

This is my 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>

And this is the code

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

The div collapses but there is no transition. How can the transition be applied?

Thanks

Answer 1

With the help of css-tricks.com, I applied the transition with the following code

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