H5中实现顶部滑入+自动淡出Toast提示需结合CSS动画与JS控制生命周期：HTML用单一容器，CSS定义toastIn/toastOut动画控制位移与透明度，JS封装showToast函数动态创建、添加入场类、延时添加出场类并移除DOM。
在 H5 中实现顶部滑入 + 自动淡出的 Toast 提示，核心是结合 CSS 动画（@keyframes）控制位移与透明度，并用 JavaScript 控制生命周期（添加、自动移除）。不需要依赖框架也能轻量完成。
1. HTML 结构：统一容器 + 动态 Toast 元素
建议全局只用一个 Toast 容器，避免重复创建 DOM：
<div id="toast-container"></div>
每次调用时动态创建并插入提示元素，用完立即移除，保证性能和样式隔离。
2. CSS 动画：定义滑入 + 淡入 → 滑出 + 淡出
关键点：使用 transform: translateY() 实现平滑位移，配合 opacity 控制透明度，动画时长建议 0.3s 入场 + 0.3s 出场 + 1.5s 停留（共 2.1s）：
.toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 12px 20px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 14px;
border-radius: 4px;
pointer-events: none;
z-index: 9999;
}
<p>@keyframes toastIn {
from {
transform: translate(-50%, -100%);
opacity: 0;
}
to {
transform: translate(-50%, 0);
opacity: 1;
}
}</p><p>@keyframes toastOut {
from {
transform: translate(-50%, 0);
opacity: 1;
}
to {
transform: translate(-50%, -100%);
opacity: 0;
}
}</p><p>.toast.in {
animation: toastIn 0.3s ease-out forwards;
}</p><p>.toast.out {
animation: toastOut 0.3s ease-in forwards;
}3. JavaScript 控制：创建、显示、自动销毁
封装成函数，支持传入文字和可选持续时间（单位毫秒）：
function showToast(text, duration = 2100) {
const container = document.getElementById('toast-container');
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = text;
<p>container.appendChild(toast);
toast.classList.add('in');</p><p>// 入场动画结束后开始计时（避免动画未结束就触发）
setTimeout(() => {
toast.classList.remove('in');
toast.classList.add('out');</p><pre class="brush:php;toolbar:false;">// 动画结束后彻底移除 DOM
setTimeout(() => {
if (toast.parentNode === container) {
container.removeChild(toast);
}
}, 300);}, duration - 300); }
调用示例：showToast('操作成功');showToast('网络错误', 3000);
4. 注意事项与优化点
- 避免多次快速调用导致堆叠：可在函数开头加锁（如
if (toastActive) return;），或排队执行 - 移动端需禁用 pointer-events：已通过
pointer-events: none设置，确保不遮挡底层操作 - 适配不同屏幕：top 值可改为
env(safe-area-inset-top, 20px)避开 iPhone 刘海 - 动画兼容性：现代浏览器均支持
transform和@keyframes，无需额外前缀
