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

* refactor: 增加 50ms 延时
* scritps: 增加脚本与样式完成抽屉组件收缩动画
* docs: 增加 Upd 标签
* feat: 增加 JSRuntime 调用脚本实现收缩动画

src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs

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

src/BootstrapBlazor/Components/Drawer/Drawer.razor

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

src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs

@@ -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();
             }
         }

src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css

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

src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.js

@@ -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);
+                }
+            }
         }
     });