Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Transition effect

BootstarpBlazor applies the transition animation to some components, you can also use it directly.

Basic usage

Demonstration of basic animation effects

Demo

FadeOut

<Button Color="Color.Primary" OnClick="OnShow" Text="FadeOut" />
<Transition TransitionType="TransitionType.FadeOut" Show="Show" OnTransitionEnd="OnShowEnd">
    <div class="my-3">FadeOut</div>
</Transition>

@code {
    private bool Show { get; set; }

    private void OnShow()
    {
        Show = true;
    }

    private Task OnShowEnd()
    {
        Show = false;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Animation execution complete callback

Execute the callback function after the animation is completed

Demo

FadeOut

<Button Color="Color.Primary" OnClick="OnTransitionShow" Text="FadeOut"></Button>
<Transition TransitionType="TransitionType.FadeOut" Show="TransitionEndShow" OnTransitionEnd="OnTransitionEndShow">
    <div class="my-3">FadeOut</div>
</Transition>
<BlockLogger @ref="Trace" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private bool TransitionEndShow { get; set; }

    private void OnTransitionShow()
    {
        TransitionEndShow = true;
    }

    private Task OnTransitionEndShow()
    {
        TransitionEndShow = false;
        Trace.Log("animation ends");
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Set animation duration

Control the animation duration in milliseconds by setting the Duration parameter

Demo

FadeIn

<Button Color="Color.Primary" OnClick="OnFadeInShow" Text="FadeIn"></Button>
<Transition TransitionType="TransitionType.FadeIn" Show="FadeInShow" Duration="3000" OnTransitionEnd="OnFadeInEndShow">
    <div class="my-3">FadeIn</div>
</Transition>

@code {
    private bool FadeInShow { get; set; }

    private void OnFadeInShow()
    {
        FadeInShow = true;
    }

    private Task OnFadeInEndShow()
    {
        FadeInShow = false;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Attributes

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Transition effect

BootstarpBlazor applies the transition animation to some components, you can also use it directly.

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01