Skip to content

Commit be3dbf8

Browse files
ArgoZhangArgoZhang
committed
feat: 增加过渡动画
1 parent 74ab053 commit be3dbf8

File tree

4 files changed

+188
-87
lines changed

4 files changed

+188
-87
lines changed

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor‎

Lines changed: 44 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@page "/tutorials/template5"
22
@layout TutorialsLayout
3+
@inherits WebSiteModuleComponentBase
4+
@attribute [JSModuleAutoLoader("Samples/Tutorials/LoginAndRegister/Template5.razor.js", AutoInvokeDispose = false)]
35

46
<HeadContent>
57
<style>
@@ -21,8 +23,8 @@
2123

2224
<div class="background-image">
2325
<div class="login-container">
24-
<div class="login-box animate-fade-in">
25-
<div class="header-row">
26+
<div class="login-box animate-fade-in" id="@Id">
27+
<div class="login-header">
2628
@if (!isAuth)
2729
{
2830
if (isEmailEntered)
@@ -45,45 +47,12 @@
4547
</div>
4648
}
4749
</div>
48-
@if (!isEmailEntered)
49-
{
50-
<h3>登录</h3>
51-
<p class="subtitle">使用你的 BootstrapBlazor 帐户。</p>
52-
<ValidateForm Model="_loginModel" OnValidSubmit="OnEmailSubmit">
53-
<BootstrapInput type="email" class="input" SkipValidate="true" IsAutoFocus="true"
54-
placeholder="电子邮件或电话号码" @bind-Value="@_loginModel.Email"></BootstrapInput>
55-
<div class="error" hidden="@(!showEmailError)">请输入有效的电子邮件地址或电话号码</div>
56-
<Button class="button" Color="Color.Primary" ButtonType="ButtonType.Submit" Text="下一步"></Button>
57-
</ValidateForm>
58-
<div class="links">
59-
<a href="#" @onclick:preventDefault>忘记用户名？</a>
60-
</div>
61-
<div class="small">
62-
不熟悉 BootstrapBlazor？<a href="/">去看文档</a>
63-
</div>
64-
}
65-
else if (!isAuth)
66-
{
67-
<h3>输入你的密码</h3>
68-
<p class="email-display">@_loginModel.Email</p>
69-
<ValidateForm Model="_loginModel" OnValidSubmit="OnPasswordSubmit">
70-
<BootstrapInput type="password" class="input" SkipValidate="true" IsAutoFocus="true"
71-
placeholder="密码" @bind-Value="@_loginModel.Password"></BootstrapInput>
72-
<div class="links">
73-
<a href="#" @onclick:preventDefault>忘记了密码？</a>
74-
</div>
75-
<Button class="button" Color="Color.Primary" ButtonType="ButtonType.Submit" Text="下一步"></Button>
76-
</ValidateForm>
77-
<div class="links">
78-
<a href="#" @onclick:preventDefault>其他登录方法</a>
79-
</div>
80-
}
81-
else
50+
@if (isAuth)
8251
{
8352
<div class="email-display2"><span>@_loginModel.Email</span></div>
8453
<h5 class="text-center mt-3 mb-0">欢迎，您已成功登录</h5>
8554
<div class="login-video-wrap">
86-
<video class="login-video" autoplay="autoplay" playsinline="playsinline" disablepictureinpicture="">
55+
<video class="login-video" autoplay playsinline disablepictureinpicture>
8756
<source src="samples/login5/loading1.mp4" type="video/mp4; codecs=av01.0.05M.08">
8857
<source src="samples/login5/loading.mov" type="video/quicktime; codecs=hvc1.1.6.H120.b0">
8958
<source src="samples/login5/loading.webm" type="video/webm; codecs=vp9">
@@ -92,55 +61,45 @@
9261
</video>
9362
</div>
9463
<p class="text-center text-muted" style="font-size: 0.75rem;">此登录高仿微软登录 UI</p>
95-
<Button class="button" Color="Color.Primary">进入</Button>
64+
<Button class="button" Color="Color.Primary" OnClick="OnReset">进入</Button>
65+
}
66+
else
67+
{
68+
<div class="login-body">
69+
<div class="login-item login-item-email show">
70+
<h3>登录</h3>
71+
<p class="subtitle">使用你的 BootstrapBlazor 帐户。</p>
72+
<ValidateForm Model="_loginModel" OnValidSubmit="OnEmailSubmit">
73+
<BootstrapInput type="email" class="input" SkipValidate="true" IsAutoFocus="true"
74+
placeholder="电子邮件或电话号码" @bind-Value="@_loginModel.Email"></BootstrapInput>
75+
<div class="error" hidden="@(!showEmailError)">请输入有效的电子邮件地址或电话号码</div>
76+
<Button class="button" Color="Color.Primary" ButtonType="ButtonType.Submit" Text="下一步"></Button>
77+
</ValidateForm>
78+
<div class="links">
79+
<a href="#" @onclick:preventDefault>忘记用户名？</a>
80+
</div>
81+
<div class="small">
82+
不熟悉 BootstrapBlazor？<a href="/">去看文档</a>
83+
</div>
84+
</div>
85+
86+
<div class="login-item login-item-password">
87+
<h3>输入你的密码</h3>
88+
<p class="email-display">@_loginModel.Email</p>
89+
<ValidateForm Model="_loginModel" OnValidSubmit="OnPasswordSubmit">
90+
<BootstrapInput type="password" class="input" SkipValidate="true" IsAutoFocus="true"
91+
placeholder="密码" @bind-Value="@_loginModel.Password"></BootstrapInput>
92+
<div class="links">
93+
<a href="#" @onclick:preventDefault>忘记了密码？</a>
94+
</div>
95+
<Button class="button" Color="Color.Primary" ButtonType="ButtonType.Submit" Text="登录"></Button>
96+
</ValidateForm>
97+
<div class="links">
98+
<a href="#" @onclick:preventDefault>其他登录方法</a>
99+
</div>
100+
</div>
101+
</div>
96102
}
97103
</div>
98104
</div>
99105
</div>
100-
101-
@code {
102-
private bool isEmailEntered = false;
103-
private bool isAuth = false;
104-
private bool showEmailError = false;
105-
private LoginModel _loginModel = new LoginModel()
106-
{
107-
Email = "[email protected]",
108-
Password = "123456"
109-
};
110-
111-
private Task OnEmailSubmit(EditContext context)
112-
{
113-
if (string.IsNullOrWhiteSpace(_loginModel.Email))
114-
{
115-
showEmailError = true;
116-
}
117-
else
118-
{
119-
showEmailError = false;
120-
isEmailEntered = true;
121-
}
122-
StateHasChanged();
123-
return Task.CompletedTask;
124-
}
125-
126-
private Task OnPasswordSubmit(EditContext context)
127-
{
128-
// 数据库检查密码逻辑可以在这里实现
129-
// 演示代码一律通过
130-
isAuth = true;
131-
StateHasChanged();
132-
return Task.CompletedTask;
133-
}
134-
135-
private void GoBack()
136-
{
137-
isEmailEntered = false;
138-
}
139-
140-
class LoginModel
141-
{
142-
public string? Email { get; set; }
143-
144-
public string? Password { get; set; }
145-
}
146-
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.cs‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the Apache 2.0 License
3+
// See the LICENSE file in the project root for more information.
4+
// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
5+
6+
using Microsoft.AspNetCore.Components.Forms;
7+
8+
namespace BootstrapBlazor.Server.Components.Samples.Tutorials.LoginAndRegister;
9+
10+
/// <summary>
11+
/// 高仿 Microsoft 登录界面
12+
/// </summary>
13+
public partial class Template5
14+
{
15+
private bool isAuth = false;
16+
private bool showEmailError = false;
17+
private bool isEmailEntered = false;
18+
19+
private readonly LoginModel _loginModel = new()
20+
{
21+
Email = "[email protected]",
22+
Password = "123456"
23+
};
24+
25+
private async Task OnEmailSubmit(EditContext context)
26+
{
27+
if (string.IsNullOrEmpty(_loginModel.Email))
28+
{
29+
showEmailError = true;
30+
isEmailEntered = false;
31+
}
32+
else
33+
{
34+
showEmailError = false;
35+
isEmailEntered = true;
36+
await InvokeVoidAsync("go", Id);
37+
}
38+
StateHasChanged();
39+
}
40+
41+
private Task OnPasswordSubmit(EditContext context)
42+
{
43+
// 数据库检查密码逻辑可以在这里实现
44+
// 演示代码一律通过
45+
isAuth = true;
46+
StateHasChanged();
47+
return Task.CompletedTask;
48+
}
49+
50+
private async Task GoBack()
51+
{
52+
isEmailEntered = false;
53+
showEmailError = false;
54+
StateHasChanged();
55+
await InvokeVoidAsync("back", Id);
56+
}
57+
58+
private void OnReset()
59+
{
60+
isAuth = false;
61+
isEmailEntered = false;
62+
}
63+
64+
/// <summary>
65+
/// <inheritdoc/>
66+
/// </summary>
67+
/// <param name="firstRender"></param>
68+
/// <returns></returns>
69+
protected override async Task OnAfterRenderAsync(bool firstRender)
70+
{
71+
await base.OnAfterRenderAsync(firstRender);
72+
}
73+
74+
private class LoginModel
75+
{
76+
public string? Email { get; set; }
77+
78+
public string? Password { get; set; }
79+
}
80+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.css‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
border-radius: 4px;
3535
}
3636

37-
.header-row {
37+
.login-header {
3838
display: flex;
3939
align-items: center;
4040
position: relative;
@@ -177,7 +177,7 @@
177177
}
178178

179179
.animate-fade-out {
180-
animation: fadeOut 0.5s ease-in-out forwards;
180+
animation: fadeOut 0.2s ease-in-out forwards;
181181
}
182182

183183
@keyframes fadeOut {
@@ -191,3 +191,18 @@
191191
transform: translateY(-20px);
192192
}
193193
}
194+
195+
.login-body {
196+
position: relative;
197+
height: 290px;
198+
}
199+
200+
.login-item {
201+
position: absolute;
202+
inset: 0;
203+
}
204+
205+
.login-item:not(.show) {
206+
opacity: 0;
207+
pointer-events: none;
208+
}

‎src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
export function init(id) {
2+
const el = document.getElementById(id);
3+
if (el) {
4+
const email = el.querySelector('.login-item-email');
5+
if (email) {
6+
email.classList.add('show');
7+
}
8+
}
9+
}
10+
11+
export function go(id) {
12+
const el = document.getElementById(id);
13+
if (el) {
14+
const email = el.querySelector('.login-item-email');
15+
if (email) {
16+
email.classList.remove('show');
17+
email.classList.remove('animate-fade-in')
18+
email.classList.add('animate-fade-out');
19+
}
20+
21+
const password = el.querySelector('.login-item-password');
22+
if (password) {
23+
password.classList.add('show');
24+
password.classList.add('animate-fade-in')
25+
password.classList.remove('animate-fade-out')
26+
}
27+
}
28+
}
29+
30+
export function back(id) {
31+
const el = document.getElementById(id);
32+
if (el) {
33+
const email = el.querySelector('.login-item-email');
34+
if (email) {
35+
email.classList.add('show');
36+
email.classList.remove('animate-fade-out');
37+
email.classList.add('animate-fade-in');
38+
}
39+
40+
const password = el.querySelector('.login-item-password');
41+
if (password) {
42+
password.classList.remove('show');
43+
password.classList.remove('animate-fade-in')
44+
password.classList.add('animate-fade-out')
45+
}
46+
}
47+
}

0 commit comments

Comments
 (0)