@page "/"
<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;
}
}
<style>
.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);
}
</style>