Transition
CSS class-based enter/leave animations — Tailwind utilities go directly into the Enter/Leave parameters.
Fade
Each Enter* / Leave* parameter is a string of utility classes.
<div class="flex flex-col gap-4 items-start">
<BitBhButton OnClick="() => showFade = !showFade"
class="inline-flex items-center gap-2 rounded-lg border border-blue-600 bg-blue-600 px-4 py-2 text-sm font-medium text-white cursor-pointer hover:bg-blue-700">
@(showFade ? "Hide" : "Show")
</BitBhButton>
<BitBhTransition Show="showFade"
Enter="transition-opacity duration-300"
EnterFrom="opacity-0"
EnterTo="opacity-100"
Leave="transition-opacity duration-200"
LeaveFrom="opacity-100"
LeaveTo="opacity-0"
class="rounded-lg border border-zinc-200 bg-white p-4 text-sm text-zinc-900 inline-block">
<p>I fade in and out.</p>
</BitBhTransition>
</div>
@code {
private bool showFade;
}Scale + Fade
Combine opacity and transform.
<div class="flex flex-col gap-4 items-start">
<BitBhButton OnClick="() => showScale = !showScale"
class="inline-flex items-center gap-2 rounded-lg border border-blue-600 bg-blue-600 px-4 py-2 text-sm font-medium text-white cursor-pointer hover:bg-blue-700">
@(showScale ? "Hide" : "Show")
</BitBhButton>
<BitBhTransition Show="showScale"
Enter="transition-all duration-300 ease-out"
EnterFrom="opacity-0 scale-95"
EnterTo="opacity-100 scale-100"
Leave="transition-all duration-200 ease-in"
LeaveFrom="opacity-100 scale-100"
LeaveTo="opacity-0 scale-95"
class="rounded-lg border border-zinc-200 bg-white p-4 text-sm text-zinc-900 inline-block">
<p>I scale and fade.</p>
</BitBhTransition>
</div>
@code {
private bool showScale;
}Slide Down
Use Tailwind's arbitrary value syntax for max-h-[…].
<div class="flex flex-col gap-4 items-start">
<BitBhButton OnClick="() => showSlide = !showSlide"
class="inline-flex items-center gap-2 rounded-lg border border-blue-600 bg-blue-600 px-4 py-2 text-sm font-medium text-white cursor-pointer hover:bg-blue-700">
@(showSlide ? "Hide" : "Show")
</BitBhButton>
<BitBhTransition Show="showSlide"
Enter="transition-all duration-300 ease-out"
EnterFrom="max-h-0 opacity-0"
EnterTo="max-h-40 opacity-100"
Leave="transition-all duration-200 ease-in"
LeaveFrom="max-h-40 opacity-100"
LeaveTo="max-h-0 opacity-0"
class="rounded-lg border border-zinc-200 bg-white p-4 text-sm text-zinc-900 inline-block overflow-hidden">
<p>I slide down from zero height.</p>
</BitBhTransition>
</div>
@code {
private bool showSlide;
}With Appear
Appear="true" runs the enter transition on first mount.
I animate on first mount too.
<div class="flex flex-col gap-4 items-start">
<BitBhButton OnClick="() => showAppear = !showAppear"
class="inline-flex items-center gap-2 rounded-lg border border-blue-600 bg-blue-600 px-4 py-2 text-sm font-medium text-white cursor-pointer hover:bg-blue-700">
@(showAppear ? "Hide" : "Show")
</BitBhButton>
<BitBhTransition Show="showAppear" Appear="true"
Enter="transition-all duration-500 ease-out"
EnterFrom="opacity-0 translate-y-4"
EnterTo="opacity-100 translate-y-0"
Leave="transition-all duration-300 ease-in"
LeaveFrom="opacity-100 translate-y-0"
LeaveTo="opacity-0 translate-y-4"
class="rounded-lg border border-zinc-200 bg-white p-4 text-sm text-zinc-900 inline-block">
<p>I animate on first mount too.</p>
</BitBhTransition>
</div>
@code {
private bool showAppear = true;
}Lifecycle Callbacks
Logic for each phase of the transition.
<div class="flex flex-col gap-4 items-start">
<BitBhButton OnClick="() => showCallbacks = !showCallbacks"
class="inline-flex items-center gap-2 rounded-lg border border-blue-600 bg-blue-600 px-4 py-2 text-sm font-medium text-white cursor-pointer hover:bg-blue-700">
@(showCallbacks ? "Hide" : "Show")
</BitBhButton>
<BitBhTransition Show="showCallbacks"
Enter="transition-opacity duration-300" EnterFrom="opacity-0" EnterTo="opacity-100"
Leave="transition-opacity duration-200" LeaveFrom="opacity-100" LeaveTo="opacity-0"
BeforeEnter='@(() => Log("BeforeEnter"))'
AfterEnter='@(() => Log("AfterEnter"))'
BeforeLeave='@(() => Log("BeforeLeave"))'
AfterLeave='@(() => Log("AfterLeave"))'
class="rounded-lg border border-zinc-200 bg-white p-4 text-sm text-zinc-900 inline-block">
<p>Check the log below.</p>
</BitBhTransition>
<pre class="text-xs text-zinc-500 whitespace-pre-wrap">@callbackLog</pre>
</div>
@code {
private bool showCallbacks;
private string callbackLog = "";
private void Log(string msg) => callbackLog += msg + "\n";
}