@page "/transition"
@inject IStringLocalizer<Transitions> Localizer

<h3>@Localizer["TransitionsTitle"]</h3>
<h4>@Localizer["TransitionsDescription"]</h4>

<DemoBlock Title="@Localizer["TransitionsNormalTitle"]"
           Introduction="@Localizer["TransitionsNormalIntro"]"
           Name="Normal">
    <Button Color="Color.Primary" OnClick="OnShow" Text="FadeOut" />
    <Transition TransitionType="TransitionType.FadeOut" Show="Show" OnTransitionEnd="OnShowEnd">
        <div class="my-3">FadeOut</div>
    </Transition>
</DemoBlock>

<DemoBlock Title="@Localizer["TransitionsEndCallbackTitle"]"
           Introduction="@Localizer["TransitionsEndCallbackIntro"]"
           Name="EndCallback">
    <Button Color="Color.Primary" OnClick="OnTransitionShow" Text="FadeOut"></Button>
    <Transition TransitionType="TransitionType.FadeOut" Show="TransitionEndShow" OnTransitionEnd="OnTransitionEndShow">
        <div class="my-3">FadeOut</div>
    </Transition>
    <ConsoleLogger @ref="Logger" />
</DemoBlock>

<DemoBlock Title="@Localizer["TransitionsDurationTitle"]"
           Introduction="@Localizer["TransitionsDurationIntro"]"
           Name="Duration">
    <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>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />
