Blazor实现菜单动画

想到动画，你可能会去安装Blazor的动画组件BlazorAnimate，然后使用它。本人初学，暂时我也不知道原理，先不用组件，自己实现吧。虽然项目中我用了AntDesignBlazor，但是我忘了使用它的菜单组件，我用的菜单组件还是VS2022自动生成的，后来我把这个菜单改造了一下，支持多级菜单，加了展示收缩箭头，那就在这基础上做吧。
1. 引用jQuery

这里使用jquery的animate方法实现动画
在wwwroot/js目录放一个jquery-1.9.1.js文件，然后在html(或_Layout.cshtml文件)中引入该js

1. [/code][img]https://img2023.cnblogs.com/blog/174862/202301/174862-20230107155259265-653685869.png[/img]
2. [size=5]2. 为左侧菜单组件NavMenu.razor添加一个js文件：NavMenu.razor.js[/size]
4. [img]https://img2023.cnblogs.com/blog/174862/202301/174862-20230107161203858-942550004.png[/img]
5. 内容如下：
6. [code]export function animate(index) { //index是菜单编码 2位数是一级菜单，4位数是二级菜单，以此类推
7.     let time = 200;
8.     let content = $(".content" + index);
9.     let h = content.height() + "px";
10.     content.css("overflow", "hidden");
12.     if (index <= 99 || content.hasClass("collapse")) { //index<=99表示一级菜单，一级菜单只有展开动画，没有收缩动画；content.hasClass("collapse")表示当前是收缩状态。
13.         content.css("height", "0");
14.         //展开动画
15.         content.animate({
16.             height: h
17.         }, time, "linear", () => {
18.             content.css("height", "auto");
19.         });
20.     } else { //不是一级菜单并且当前是展开状态，将执行收缩动画
21.         content.css("height", "auto");
22.         //收缩动画
23.         content.animate({
24.             height: 0
25.         }, time, "linear", () => {
26.             setTimeout(function () { //延迟执行，否则会导致闪烁
27.                 content.css("height", "auto");
28.             }, 100);
29.         });
30.         return [time]; //收缩时，需要等待收缩动画展示完成，再隐藏菜单容器div
31.     }
32.     return [0];
33. }

复制代码

3. 在Blazor组件NavMenu.razor文件中引入该js

1. @inject IJSRuntime _js;
3. @code {
4.     IJSObjectReference _module;
6.     protected override async void OnAfterRender(bool firstRender)
7.     {
8.         if (firstRender)
9.         {
10.             _module = await _js.InvokeAsync<IJSObjectReference>("import", "./Shared/NavMenu.razor.js");
11.         }
12.     }
13. }

复制代码

4. 调用js方法实现菜单动画

1. @code{
2.     ...省略此处的代码
3.    
4.     private async Task ToggleMenuClick(int index)
5.     {
6.         object[] args = new object[] { index };
7.         object[] objs = await _module.InvokeAsync<object[]>("animate", args);
8.         int time = ((JsonElement)objs[0]).GetInt32();
9.         if (time > 0) { await Task.Delay(time); } //time大于0，表示需要等待收缩动画展示完成，再隐藏菜单容器div
11.         if (index > 99)
12.         {
13.             if (_dict.ContainsKey(index))
14.             {
15.                 _dict[index] = !_dict[index]; //记录非一级菜单的展开状态
16.             }
17.             else
18.             {
19.                 _dict[index] = false; //记录非一级菜单的展开状态
20.             }
21.         }
22.         else
23.         {
24.             _index = index; //_index是当前展示的菜单编码
25.         }
26.     }
28.     ...省略此处的代码
29. }

复制代码

效果图


NavMenu.razor页面完整代码如下

1. @using System.Text.Json;
2. @inject IJSRuntime _js;
5. await ToggleMenuClick(01))">
6.    
7.         <a  target="_blank" href="https://www.cnblogs.com/javascript:void(0);">任务管理</a>
8.         <button title="Navigation menu" >
9.             
10.         </button>
11.         
12.    
17.     <nav >
18.         
19.             <NavLink  href="kpTask/taskList">
20.                  任务列表
21.             </NavLink>
22.         
23.         
24.             <NavLink  href="kpTask/taskRunList">
25.                  任务执行记录
26.             </NavLink>
28.             
29.             <NavLink  target="_blank" href="https://www.cnblogs.com/javascript:void(0);" @onclick="@(()=> ToggleMenuClick(0101))" >
30.                  测试二级菜单组
31.                
32.             </NavLink>
34.             
35.             
36.                 <nav >
37.                     
38.                         <NavLink  href="counter">
39.                              测试二级菜单
40.                         </NavLink>
42.                         
43.                         <NavLink  target="_blank" href="https://www.cnblogs.com/javascript:void(0);" @onclick="@(()=> ToggleMenuClick(010101))" >
44.                              测试三级菜单组
45.                            
46.                         </NavLink>
48.                         
49.                         
50.                             <nav >
51.                                 
52.                                     <NavLink  href="counter">
53.                                          测试三级菜单
54.                                     </NavLink>
55.                                 
56.                             </nav>
57.                         
58.                     
59.                     
60.                         <NavLink  href="counter">
61.                              测试二级菜单2
62.                         </NavLink>
63.                     
64.                 </nav>
65.             
66.         
67.     </nav>
71. await ToggleMenuClick(02))">
72.    
73.         <a  target="_blank" href="https://www.cnblogs.com/javascript:void(0);">任务管理</a>
74.         <button title="Navigation menu" >
75.             
76.         </button>
77.         
78.    
83.     <nav >
84.         
85.             <NavLink  href="kpTask/taskList">
86.                  任务列表
87.             </NavLink>
88.         
89.         
90.             <NavLink  href="kpTask/taskRunList">
91.                  任务执行记录
92.             </NavLink>
94.             
95.             <NavLink  target="_blank" href="https://www.cnblogs.com/javascript:void(0);" @onclick="@(()=> ToggleMenuClick(0201))" >
96.                  测试二级菜单组
97.                
98.             </NavLink>
100.             
101.             
102.                 <nav >
103.                     
104.                         <NavLink  href="counter">
105.                              测试二级菜单
106.                         </NavLink>
107.                     
108.                 </nav>
109.             
110.         
111.     </nav>
115. await ToggleMenuClick(03))">
116.    
117.         <a  target="_blank" href="https://www.cnblogs.com/javascript:void(0);">任务管理</a>
118.         <button title="Navigation menu" >
119.             
120.         </button>
121.         
122.    
127.     <nav >
128.         
129.             <NavLink  href="kpTask/taskList">
130.                  任务列表
131.             </NavLink>
132.         
133.         
134.             <NavLink  href="kpTask/taskRunList">
135.                  任务执行记录
136.             </NavLink>
138.             
139.             <NavLink  target="_blank" href="https://www.cnblogs.com/javascript:void(0);" @onclick="@(()=> ToggleMenuClick(0301))" >
140.                  测试二级菜单组
141.                
142.             </NavLink>
144.             
145.             
146.                 <nav >
147.                     
148.                         <NavLink  href="counter">
149.                              测试二级菜单
150.                         </NavLink>
151.                     
152.                 </nav>
153.             
154.         
155.     </nav>
158. @code {
159.     int _index = 01;
160.     Dictionary<int, bool> _dict = new Dictionary<int, bool>();
161.     IJSObjectReference _module;
163.     protected override async void OnAfterRender(bool firstRender)
164.     {
165.         if (firstRender)
166.         {
167.             _module = await _js.InvokeAsync<IJSObjectReference>("import", "./Shared/NavMenu.razor.js");
168.         }
169.     }
171.     private async Task ToggleMenuClick(int index)
172.     {
173.         object[] args = new object[] { index };
174.         object[] objs = await _module.InvokeAsync<object[]>("animate", args);
175.         int time = ((JsonElement)objs[0]).GetInt32();
176.         if (time > 0) { await Task.Delay(time); }
178.         if (index > 99)
179.         {
180.             if (_dict.ContainsKey(index))
181.             {
182.                 _dict[index] = !_dict[index];
183.             }
184.             else
185.             {
186.                 _dict[index] = false;
187.             }
188.         }
189.         else
190.         {
191.             _index = index;
192.         }
193.     }
195.     private string MenuGroupContentClass(int index)
196.     {
197.         if (index > 99)
198.         {
199.             if (!_dict.ContainsKey(index) || _dict[index])
200.             {
201.                 return $"collapse content{index}";
202.             }
203.             else
204.             {
205.                 return $"content{index}";
206.             }
207.         }
208.         else
209.         {
210.             if (index == _index)
211.             {
212.                 return $"content{index}";
213.             }
214.             else
215.             {
216.                 return $"collapse content{index}";
217.             }
218.         }
219.     }
221.     private string ArrowClass(int index)
222.     {
223.         if (index > 99)
224.         {
225.             if (!_dict.ContainsKey(index) || _dict[index])
226.             {
227.                 return "arrow-collapse arrow-float";
228.             }
229.             else
230.             {
231.                 return "arrow arrow-float";
232.             }
233.         }
234.         else
235.         {
236.             if (index == _index)
237.             {
238.                 return "arrow";
239.             }
240.             else
241.             {
242.                 return "arrow-collapse";
243.             }
244.         }
245.     }
247. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！