!790 feat(#I2A97D): add animation on Drawer when closing

* refactor: 增加 50ms 延时
* scritps: 增加脚本与样式完成抽屉组件收缩动画
* docs: 增加 Upd 标签
* feat: 增加 JSRuntime 调用脚本实现收缩动画
This commit is contained in:
Argo 2020-12-22 00:05:24 +08:00
parent b4bb24a05e
commit c3b27b8a0c
9 changed files with 68 additions and 18 deletions

View File

@ -528,7 +528,8 @@ namespace BootstrapBlazor.Shared.Shared
item.AddItem(new DemoMenuItem()
{
Text = "抽屉 Drawer",
Url = "drawers"
Url = "drawers",
IsUpdate = true
});
item.AddItem(new DemoMenuItem()
{

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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