有时，微妙的设计元素可以对用户体验产生巨大的影响。登录弹出窗口上的“摇动”效果不是显示传统的错误消息，而是提供了明确且立即的指示，表明出现了问题。本教程将指导您使用 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中文网其他相关文章！
