H5 中怎么实现 Toast 提示框从屏幕顶部滑下并自动淡出的完整过渡-H5教程-PHP中文网

H5中实现顶部滑入+自动淡出Toast提示需结合CSS动画与JS控制生命周期：HTML用单一容器，CSS定义toastIn/toastOut动画控制位移与透明度，JS封装showToast函数动态创建、添加入场类、延时添加出场类并移除DOM。

h5 中怎么实现 toast 提示框从屏幕顶部滑下并自动淡出的完整过渡

在 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）：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

.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;
}</p>

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);