
Transition 过渡效果
BootstarpBlazor 应用在部分组件的过渡动画,你也可以直接使用。
基础用法
基础动画效果演示
Demo
FadeOut
动画执行完成回调
动画执行完成后执行回调函数
Demo
FadeOut
设置动画时长
通过设置 Duration
参数控制动画时长单位为毫秒
Demo
FadeIn
Attributes
Loading...
@page "/transitions"
<h3>Transition 过渡效果</h3>
<h4>BootstarpBlazor 应用在部分组件的过渡动画,你也可以直接使用。</h4>
<DemoBlock Title="基础用法" Introduction="基础动画效果演示" 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="动画执行完成回调" Introduction="动画执行完成后执行回调函数" 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>
<BlockLogger @ref="Trace" />
</DemoBlock>
<DemoBlock Title="设置动画时长" Introduction="通过设置 <code>Duration</code> 参数控制动画时长单位为毫秒" 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()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public partial class Transitions
{
private bool Show { get; set; }
[NotNull]
private BlockLogger? Trace { get; set; }
private void OnShow()
{
Show = true;
}
private Task OnShowEnd()
{
Show = false;
StateHasChanged();
return Task.CompletedTask;
}
private bool TransitionEndShow { get; set; }
private void OnTransitionShow()
{
TransitionEndShow = true;
}
private Task OnTransitionEndShow()
{
TransitionEndShow = false;
Trace.Log("动画结束");
StateHasChanged();
return Task.CompletedTask;
}
private bool FadeInShow { get; set; }
private void OnFadeInShow()
{
FadeInShow = true;
}
private Task OnFadeInEndShow()
{
FadeInShow = false;
StateHasChanged();
return Task.CompletedTask;
}
private static IEnumerable<AttributeItem> GetAttributes() => new[]
{
// TODO: 移动到数据库中
new AttributeItem() {
Name = "TransitionType",
Description = "动画效果名称",
Type = "TransitionType",
ValueList = " — ",
DefaultValue = "FadeIn"
},
new AttributeItem() {
Name = "Show",
Description = "控制动画执行",
Type = "Boolean",
ValueList = "true|false",
DefaultValue = "true"
},
new AttributeItem() {
Name = "Duration",
Description = "控制动画时长",
Type = "int",
ValueList = " — ",
DefaultValue = "0"
},
new AttributeItem() {
Name = "OnTransitionEnd",
Description = "动画执行完成回调",
Type = "Func<Task>",
ValueList = " — ",
DefaultValue = " — "
}
};
}