有時，微妙的設計元素可以對使用者體驗產生巨大的影響。登入彈出視窗上的「搖晃」效果不是顯示傳統的錯誤訊息，而是提供了明確且立即的指示，表明出現了問題。本教學將指導您使用 vanilla JavaScript 、 CSS 動畫 和開源程式庫 Tippy.js.
來實現此功能。我們的目標是：
讓我們開始吧！
我們先為搖動效果定義一個可重複使用的 CSS 動畫。下面的 @keyframes 規則模仿左右搖晃：
@keyframes shaking {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(4px, 0, 0); }
}
.shake {
animation: shaking 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
我們將使用 Tippy.js 建立一個可點擊的登入彈出視窗。彈出視窗將包括：
這是設定彈出視窗的核心 JavaScript：
APP.Signin = class {
constructor($target) {
this.values = {}; // Store any required state
if ($target) this.$target = $target; // The DOM element triggering the popover
this.init(); // Initialize the popover
return this;
}
// Trigger the shake animation
shake() {
this.$tippy.classList.add('shake');
return this;
}
// Handle Sign-In button clicks
onSigninClicked(event) {
event.preventDefault();
// Retrieve the entered email
let email = document.querySelector('.app-signin-email').value;
// Error and success handlers
let _onError = () => this.shake();
let _onSuccess = (response) => {
if (response.errors.length) {
this.shake(); // Shake on error
} else {
// Handle successful login
console.log('Login successful!');
}
};
// Simulate a backend login request
let form_data = new FormData();
form_data.append('method', 'quickSignIn');
form_data.append('email', email);
axios({
method: 'POST',
url: 'path/to/server',
data: form_data,
headers: { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' },
})
.then((response) => (typeof response.data === 'string' ? JSON.parse(response.data) : response.data))
.then(_onSuccess)
.catch(_onError);
}
// Define the HTML content of the popover
getContent() {
return `
<div>
<hr>
<p><strong>2228+ FREE</strong> <u><b><strong>RESOURCES</strong></b></u> <strong>FOR DEVELOPERS!! ❤️</strong> ?? <strong><sub><strong>(updated daily)</strong></sub></strong></p>
<blockquote>
<p>1400+ Free HTML Templates<br><br>
359+ Free News Articles<br><br>
69+ Free AI Prompts<br><br>
323+ Free Code Libraries<br><br>
52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!<br><br>
25+ Free Open Source Icon Libraries</p>
</blockquote>
<p>Visit dailysandbox.pro for free access to a treasure trove of resources!</p>
<hr>
<h3>
Part 3: Wiring It All Together
</h3>
<p><strong>Simulated Backend</strong> : If you don’t have a real server, mock responses with a promise:<br>
</p>
<pre class="brush:php;toolbar:false">const mockServer = (email) =>
new Promise((resolve, reject) => {
setTimeout(() => {
if (email === 'test@email.com') resolve({ errors: [] });
else reject({ errors: ['Invalid email'] });
}, 500);
});
彈出框的 CSS ：確保彈出框符合您的設計。這是一個簡單的設定：
.app-signin {
display: flex;
flex-direction: column;
gap: 10px;
}
.app-signin-email {
width: 100%;
padding: 10px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
.app-signin-btn {
background-color: #007bff;
color: white;
text-align: center;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
.app-signin-btn:hover {
background-color: #0056b3;
}
HTML 觸發器元素 ：在 HTML 中加入觸發器元素：
<hr>
<h3>
第四部分：測試震動效果
</h3>
<ol>
<li>點選<strong>登入</strong>按鈕開啟彈出視窗。 </li>
<li>輸入無效的電子郵件並提交。觀察彈出框晃動，表示有錯誤。 </li>
<li>輸入有效的電子郵件，看不到晃動－成功！ </li>
</ol>
<hr>
<h3>
結論：使用者友善的錯誤提示
</h3>
<p>搖動效果透過提供清晰、直覺的錯誤指示器來增強使用者體驗，而不會因為額外的訊息而使 UI 變得混亂。與用於時尚彈出視窗的 Tippy.js 和用於互動性的 vanilla JS 相結合，此設定乾淨、實用且具有視覺吸引力。 </p>
<p>不斷嘗試和調整－因為出色的使用者體驗取決於細節！ </p>
<p>有關 Web 開發的更多技巧，請查看 <strong>DailySandbox</strong> 並註冊我們的<strong>免費時事通訊</strong>以保持領先地位！ </p>
以上是在登入彈出視窗中新增「搖晃」效果以提供視覺錯誤提示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
