doc(Template5): add transition animation #6469
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| // Licensed to the .NET Foundation under one or more agreements. | ||
| // The .NET Foundation licenses this file to you under the Apache 2.0 License | ||
| // See the LICENSE file in the project root for more information. | ||
| // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone | ||
|
|
||
| using Microsoft.AspNetCore.Components.Forms; | ||
|
|
||
| namespace BootstrapBlazor.Server.Components.Samples.Tutorials.LoginAndRegister; | ||
|
|
||
| /// <summary> | ||
| /// 高仿 Microsoft 登录界面 | ||
| /// </summary> | ||
| public partial class Template5 | ||
| { | ||
| private bool isAuth = false; | ||
| private bool showEmailError = false; | ||
| private bool isEmailEntered = false; | ||
|
|
||
| private readonly LoginModel _loginModel = new() | ||
| { | ||
| Email = "[email protected]", | ||
| Password = "123456" | ||
| }; | ||
|
|
||
| private async Task OnEmailSubmit(EditContext context) | ||
| { | ||
| if (string.IsNullOrEmpty(_loginModel.Email)) | ||
| { | ||
| showEmailError = true; | ||
| isEmailEntered = false; | ||
| } | ||
| else | ||
| { | ||
| showEmailError = false; | ||
| isEmailEntered = true; | ||
| await InvokeVoidAsync("go", Id); | ||
| } | ||
| StateHasChanged(); | ||
| } | ||
|
|
||
| private Task OnPasswordSubmit(EditContext context) | ||
| { | ||
| // 数据库检查密码逻辑可以在这里实现 | ||
| // 演示代码一律通过 | ||
| isAuth = true; | ||
| StateHasChanged(); | ||
| return Task.CompletedTask; | ||
| } | ||
|
|
||
| private async Task GoBack() | ||
| { | ||
| isEmailEntered = false; | ||
| showEmailError = false; | ||
| StateHasChanged(); | ||
| await InvokeVoidAsync("back", Id); | ||
| } | ||
|
|
||
| private void OnReset() | ||
| { | ||
| isAuth = false; | ||
| isEmailEntered = false; | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// <inheritdoc/> | ||
| /// </summary> | ||
| /// <param name="firstRender"></param> | ||
| /// <returns></returns> | ||
| protected override async Task OnAfterRenderAsync(bool firstRender) | ||
| { | ||
| await base.OnAfterRenderAsync(firstRender); | ||
| } | ||
|
|
||
| private class LoginModel | ||
| { | ||
| public string? Email { get; set; } | ||
|
|
||
| public string? Password { get; set; } | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,47 @@ | ||||||||||||||||||||||||||||
| export function init(id) { | ||||||||||||||||||||||||||||
| const el = document.getElementById(id); | ||||||||||||||||||||||||||||
| if (el) { | ||||||||||||||||||||||||||||
| const email = el.querySelector('.login-item-email'); | ||||||||||||||||||||||||||||
| if (email) { | ||||||||||||||||||||||||||||
| email.classList.add('show'); | ||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
|
Comment on lines
+1
to
+7
There was a problem hiding this comment. issue (bug_risk): The 'init' function is defined but not invoked from C#. Call 'init' from the C# side (e.g., in OnAfterRenderAsync) to ensure the login form displays the email step correctly on first render. |
||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||
| export function go(id) { | ||||||||||||||||||||||||||||
| const el = document.getElementById(id); | ||||||||||||||||||||||||||||
| if (el) { | ||||||||||||||||||||||||||||
| const email = el.querySelector('.login-item-email'); | ||||||||||||||||||||||||||||
| if (email) { | ||||||||||||||||||||||||||||
| email.classList.remove('show'); | ||||||||||||||||||||||||||||
| email.classList.remove('animate-fade-in') | ||||||||||||||||||||||||||||
| email.classList.add('animate-fade-out'); | ||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||
| const password = el.querySelector('.login-item-password'); | ||||||||||||||||||||||||||||
| if (password) { | ||||||||||||||||||||||||||||
| password.classList.add('show'); | ||||||||||||||||||||||||||||
| password.classList.add('animate-fade-in') | ||||||||||||||||||||||||||||
| password.classList.remove('animate-fade-out') | ||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||
| export function back(id) { | ||||||||||||||||||||||||||||
| const el = document.getElementById(id); | ||||||||||||||||||||||||||||
| if (el) { | ||||||||||||||||||||||||||||
| const email = el.querySelector('.login-item-email'); | ||||||||||||||||||||||||||||
| if (email) { | ||||||||||||||||||||||||||||
| email.classList.add('show'); | ||||||||||||||||||||||||||||
| email.classList.remove('animate-fade-out'); | ||||||||||||||||||||||||||||
| email.classList.add('animate-fade-in'); | ||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
|
Comment on lines
+33
to
+38
There was a problem hiding this comment. suggestion: Consider removing all animation classes before adding new ones to prevent animation conflicts. Residual animation classes can cause unintended effects. Remove both 'animate-fade-in' and 'animate-fade-out' before adding the new class.
Suggested change
|
||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||
| const password = el.querySelector('.login-item-password'); | ||||||||||||||||||||||||||||
| if (password) { | ||||||||||||||||||||||||||||
| password.classList.remove('show'); | ||||||||||||||||||||||||||||
| password.classList.remove('animate-fade-in') | ||||||||||||||||||||||||||||
| password.classList.add('animate-fade-out') | ||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
issue (complexity): Consider replacing multiple boolean flags with a single state enum, removing the unused lifecycle method, and extracting the model class to its own file for clarity.
Here are a few focused tweaks that preserve all functionality while collapsing the three bool flags into a single state enum, removing the no-op lifecycle hook, and pulling your model out of the component:
Stagefield:StateHasChanged()calls (Blazor auto-re-renders on events):Remove the empty
OnAfterRenderAsyncoverride completely.Extract
LoginModelinto its own file (e.g.LoginModel.cs) under the same namespace:_stageinstead of multiple booleans:This collapses your three flags (
isAuth,showEmailError,isEmailEntered) into one, removes redundant lifecycle overrides, and pulls the model to its own file.