使用fixed定位和CSS过渡或动画实现顶部滑入提示条，通过JavaScript控制类名切换显示状态，结合setTimeout自动关闭，并利用强制重排解决重复触发问题，确保动画流畅播放。
通知提示条在网页中很常见，比如登录成功后的“操作成功”提示，或者表单验证失败的提醒。要实现一个从顶部滑入、停留几秒后自动消失的效果，可以结合 CSS 的 position 定位 和 transition 或 animation 来完成。下面一步步说明如何实现。
1. 使用 position 固定提示条位置
为了让提示条浮在页面上方，不随滚动影响，通常使用 position: fixed。一般放在视口顶部居中位置。
.notification {
position: fixed;
top: -60px; /* 初始隐藏在顶部外面 */
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 12px 24px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 1000;
min-width: 280px;
text-align: center;
}
这里用 top: -60px 把元素初始状态藏在屏幕外，等待动画进入。通过 left: 50% + transform 实现水平居中。
2. 添加滑入滑出动画
可以用 CSS transition 配合 JavaScript 控制类名切换，也可以直接用 @keyframes 动画。
立即学习“前端免费学习笔记（深入）”；
方法一：transition 过渡（推荐动态控制）
.notification {
/* 上面样式保持不变 */
transition: top 0.3s ease;
}
<p>.notification.show {
top: 16px; /<em> 滑入到距顶部 16px 处 </em>/
}</p>JavaScript 控制显示与隐藏：
const notification = document.querySelector('.notification');
<p>// 显示提示
function showNotification(message) {
notification.textContent = message;
notification.classList.add('show');</p><p>// 3秒后自动收起
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}</p>方法二：使用 @keyframes 动画（一次性播放）
@keyframes slideInDown {
from {
transform: translateY(-100%) translateX(-50%);
opacity: 0;
}
to {
transform: translateY(16px) translateX(-50%);
opacity: 1;
}
}
<p>.notification.animate {
animation: slideInDown 0.3s ease-out forwards;
}</p>添加 animate 类时触发动画，forwards 保证动画结束后停留在最终状态。
3. 自动关闭与重复触发处理
如果用户连续点击触发通知，需避免多个动画冲突。可以通过移除类再重新添加来重置动画：
function showToast(message) {
notification.textContent = message;
notification.classList.remove('show');
void notification.offsetWidth; // 强制重排，确保下一行生效
notification.classList.add('show');
}
这一行 void notification.offsetWidth 是关键，它强制浏览器重新计算布局，使 transition 能重新触发。
4. 完整示例结构
<div class="notification">操作成功！</div>
<p><button onclick="showNotification('提交成功')">显示提示</button></p>CSS 和 JS 如上所述，组合起来即可实现平滑的提示条效果。
基本上就这些。定位加动画，配合 JS 控制类名，就能做出专业又轻量的通知提示条。不复杂但容易忽略细节，比如重排触发和 z-index 层级控制。
