Transition
CSS class-based enter/leave animations with automatic lifecycle management.
Fade
Toggle the panel. On enter: opacity-0 → opacity-100.
On leave: opacity-100 → opacity-0. The element is
unmounted after the leave animation completes.
<BitBhTransition Show="@isOpen"
Enter="transition-opacity duration-300"
EnterFrom="opacity-0"
EnterTo="opacity-100"
Leave="transition-opacity duration-200"
LeaveFrom="opacity-100"
LeaveTo="opacity-0">
<div class="panel">I fade in and out.</div>
</BitBhTransition>/* Utility classes — you can use Tailwind or write your own */
.transition-opacity { transition-property: opacity; }
.duration-300 { transition-duration: 300ms; }
.duration-200 { transition-duration: 200ms; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }Scale + Fade
Combine opacity and transform for a more dynamic entrance. The
Enter / Leave classes set the transition
properties and duration; From / To set the
start and end states.
<BitBhTransition Show="@isOpen"
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">
<div class="panel">I scale and fade.</div>
</BitBhTransition>/* Utility classes — you can use Tailwind or write your own */
.transition-all { transition-property: all; }
.duration-300 { transition-duration: 300ms; }
.duration-200 { transition-duration: 200ms; }
.ease-out { transition-timing-function: ease-out; }
.ease-in { transition-timing-function: ease-in; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }Slide Down
A slide-down reveal using max-height and overflow: hidden.
Useful for accordion-style content reveals.
<BitBhTransition Show="@isOpen"
Enter="slide-enter"
EnterFrom="slide-enter-from"
EnterTo="slide-enter-to"
Leave="slide-leave"
LeaveFrom="slide-leave-from"
LeaveTo="slide-leave-to">
<div class="panel">I slide down.</div>
</BitBhTransition>/* Slide-down using max-height */
.slide-box { overflow: hidden; }
.slide-enter { transition: max-height 300ms ease-out, opacity 300ms ease-out; }
.slide-enter-from { max-height: 0; opacity: 0; }
.slide-enter-to { max-height: 10rem; opacity: 1; }
.slide-leave { transition: max-height 200ms ease-in, opacity 200ms ease-in; }
.slide-leave-from { max-height: 10rem; opacity: 1; }
.slide-leave-to { max-height: 0; opacity: 0; }With Appear
Set Appear="true" to run the enter transition on initial mount.
Without it, elements that start with Show="true" appear instantly.
I animate on first mount too.
<BitBhTransition Show="@isOpen"
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">
<div class="panel">I animate on first mount too.</div>
</BitBhTransition>
@* Without Appear="true", elements that start with Show="true" appear instantly. *@/* Utility classes — you can use Tailwind or write your own */
.transition-all { transition-property: all; }
.duration-500 { transition-duration: 500ms; }
.duration-300 { transition-duration: 300ms; }
.ease-out { transition-timing-function: ease-out; }
.ease-in { transition-timing-function: ease-in; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.translate-y-4 { transform: translateY(1rem); }
.translate-y-0 { transform: translateY(0); }Lifecycle Callbacks
Use BeforeEnter, AfterEnter,
BeforeLeave, AfterLeave to run logic at
each phase of the transition.
<BitBhTransition Show="@isOpen"
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\")">
<div class="panel">Check the log.</div>
</BitBhTransition>/* Utility classes — you can use Tailwind or write your own.
The callback demo reuses the same fade classes as the first demo;
BeforeEnter / AfterEnter / BeforeLeave / AfterLeave add no CSS hooks. */
.transition-opacity { transition-property: opacity; }
.duration-300 { transition-duration: 300ms; }
.duration-200 { transition-duration: 200ms; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }