mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 21:50:05 +08:00
!790 feat(#I2A97D): add animation on Drawer when closing
* refactor: 增加 50ms 延时 * scritps: 增加脚本与样式完成抽屉组件收缩动画 * docs: 增加 Upd 标签 * feat: 增加 JSRuntime 调用脚本实现收缩动画
This commit is contained in:
parent
b4bb24a05e
commit
c3b27b8a0c
@ -528,7 +528,8 @@ namespace BootstrapBlazor.Shared.Shared
|
||||
item.AddItem(new DemoMenuItem()
|
||||
{
|
||||
Text = "抽屉 Drawer",
|
||||
Url = "drawers"
|
||||
Url = "drawers",
|
||||
IsUpdate = true
|
||||
});
|
||||
item.AddItem(new DemoMenuItem()
|
||||
{
|
||||
|
@ -1,7 +1,7 @@
|
||||
@namespace BootstrapBlazor.Components
|
||||
@inherits DrawerBase
|
||||
@inherits BootstrapComponentBase
|
||||
|
||||
<div @attributes="@AdditionalAttributes" tabindex="-1" class="@ClassString">
|
||||
<div @attributes="@AdditionalAttributes" tabindex="-1" class="@ClassString" @ref="DrawerElement">
|
||||
<div role="document" tabindex="-1" class="drawer-container" @onclick="@OnContainerClick">
|
||||
<div aria-modal="true" aria-labelledby="drawer-title" role="dialog" tabindex="-1" class="@DrawerClassString" style="@DrawerStyleString" @onclick:stopPropagation>
|
||||
@ChildContent
|
||||
|
@ -9,26 +9,28 @@
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace BootstrapBlazor.Components
|
||||
{
|
||||
/// <summary>
|
||||
/// Drawer 组件基类
|
||||
/// </summary>
|
||||
public abstract class DrawerBase : BootstrapComponentBase
|
||||
public sealed partial class Drawer
|
||||
{
|
||||
private ElementReference DrawerElement { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 获得 组件样式
|
||||
/// </summary>
|
||||
protected string? ClassString => CssBuilder.Default("drawer-wrapper")
|
||||
.AddClass("is-open", IsOpen)
|
||||
private string? ClassString => CssBuilder.Default("drawer-wrapper")
|
||||
.AddClassFromAttributes(AdditionalAttributes)
|
||||
.Build();
|
||||
|
||||
/// <summary>
|
||||
/// 获得 抽屉 Style 字符串
|
||||
/// </summary>
|
||||
protected string? DrawerStyleString => CssBuilder.Default()
|
||||
private string? DrawerStyleString => CssBuilder.Default()
|
||||
.AddClass($"width: {Width};", !string.IsNullOrEmpty(Width) && Placement != Placement.Top && Placement != Placement.Bottom)
|
||||
.AddClass($"height: {Height};", !string.IsNullOrEmpty(Height) && (Placement == Placement.Top || Placement == Placement.Bottom))
|
||||
.Build();
|
||||
@ -36,7 +38,7 @@ namespace BootstrapBlazor.Components
|
||||
/// <summary>
|
||||
/// 获得 抽屉样式
|
||||
/// </summary>
|
||||
protected string? DrawerClassString => CssBuilder.Default("drawer")
|
||||
private string? DrawerClassString => CssBuilder.Default("drawer")
|
||||
.AddClass("left", Placement != Placement.Right && Placement != Placement.Top && Placement != Placement.Bottom)
|
||||
.AddClass("top", Placement == Placement.Top)
|
||||
.AddClass("right", Placement == Placement.Right)
|
||||
@ -91,6 +93,21 @@ namespace BootstrapBlazor.Components
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// OnAfterRenderAsync 方法
|
||||
/// </summary>
|
||||
/// <param name="firstRender"></param>
|
||||
/// <returns></returns>
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
await base.OnAfterRenderAsync(firstRender);
|
||||
|
||||
if (!firstRender)
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync(DrawerElement, "bb_drawer", IsOpen);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 点击背景遮罩方法
|
||||
/// </summary>
|
||||
@ -99,7 +116,6 @@ namespace BootstrapBlazor.Components
|
||||
if (IsBackdrop)
|
||||
{
|
||||
IsOpen = false;
|
||||
if (IsOpenChanged.HasDelegate) IsOpenChanged.InvokeAsync(IsOpen);
|
||||
OnClickBackdrop?.Invoke();
|
||||
}
|
||||
}
|
File diff suppressed because one or more lines are too long
@ -5281,10 +5281,6 @@ input:disabled,
|
||||
z-index: 2020;
|
||||
}
|
||||
|
||||
.drawer-wrapper.is-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.drawer-container {
|
||||
position: relative;
|
||||
left: 0;
|
||||
@ -5334,9 +5330,31 @@ input:disabled,
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.is-open .drawer {
|
||||
.is-open .drawer,
|
||||
.is-open.drawer-wrapper,
|
||||
.is-close.drawer-wrapper {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.is-close .drawer {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.is-close .drawer {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.is-close .drawer.right {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.is-close .drawer.top {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.is-close .drawer.bottom {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
/*end drawer*/
|
||||
|
||||
/*message*/
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1992,6 +1992,21 @@
|
||||
$search.focus();
|
||||
});
|
||||
}
|
||||
},
|
||||
bb_drawer: function (el, open) {
|
||||
var $el = $(el);
|
||||
if (open) {
|
||||
$el.addClass('is-open');
|
||||
}
|
||||
else {
|
||||
if ($el.hasClass('is-open')) {
|
||||
$el.removeClass('is-open').addClass('is-close');
|
||||
var handler = window.setTimeout(function () {
|
||||
window.clearTimeout(handler);
|
||||
$el.removeClass('is-close');
|
||||
}, 350);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user