Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Transition 过渡效果

BootstarpBlazor 应用在部分组件的过渡动画,你也可以直接使用。

基础动画效果演示

Demo
FadeOut

动画执行完成后执行回调函数

Demo
FadeOut

通过设置 Duration 参数控制动画时长单位为毫秒

Demo
FadeIn

Attributes

Loading...
@page "/transitions"

<h3>Transition 过渡效果</h3>

<h4>BootstarpBlazor 应用在部分组件的过渡动画,你也可以直接使用。</h4>

<Block Title="基础用法" Introduction="基础动画效果演示">
    <Button Color="Color.Primary" OnClick="OnShow" Text="FadeOut" />
    <Transition TransitionType="TransitionType.FadeOut" Show="Show" OnTransitionEnd="OnShowEnd">
        <div class="my-3">FadeOut</div>
    </Transition>
</Block>

<Block Title="动画执行完成回调" Introduction="动画执行完成后执行回调函数">
    <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" />
</Block>

<Block Title="设置动画时长" Introduction="通过设置 <code>Duration</code> 参数控制动画时长单位为毫秒">
    <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>
</Block>

<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.Pages.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <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 = "FadeIn/FadeOut",
                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 = " - "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload