提示函数

下面是一个封装好的提示函数示例，使用CSS动画实现中间下边的弹出效果：

<!DOCTYPE html>
<html>
<head>
<style>
.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  white-space: nowrap;
  animation: toastSlide 0.3s ease-out, toastFade 0.3s 2.7s ease-out forwards;
}

@keyframes toastSlide {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes toastFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>
</head>
<body>

<script>
function toast(message, duration = 3000) {
  // 创建Toast元素
  const toastEl = document.createElement('div');
  toastEl.className = 'toast';
  toastEl.textContent = message;

  // 设置自定义动画时间
  toastEl.style.animation = `
    toastSlide 0.3s ease-out,
    toastFade 0.3s ${duration - 300}ms ease-out forwards
  `;

  // 添加到页面
  document.body.appendChild(toastEl);

  // 动画结束后移除元素
  setTimeout(() => {
    toastEl.remove();
  }, duration);
}

// 使用示例
toast('复制成功！');
// toast('操作成功！', 2000); // 自定义持续时间
</script>

</body>
</html>

特性说明：

位置始终居中在屏幕底部（可调整bottom值改变垂直位置）
滑动入场 + 渐变离场动画组合
默认3秒自动消失（可传第二个参数自定义持续时间）
自动处理元素创建和移除
支持多行同时显示（多次调用会叠加提示）
半透明黑色背景+白色文字的高对比度设计
自带圆角和适中的内边距

使用方式：

// 基础用法
toast('操作成功！');

// 自定义持续时间（毫秒）
toast('内容已保存', 2000);

// 处理长文本
toast('这是一条比较长的提示信息，会自动换行显示完整内容');

可以调整CSS中的以下属性来自定义样式：

background: 修改背景颜色
color: 修改文字颜色
border-radius: 调整圆角大小
padding: 调整内边距
font-size: 调整文字大小
bottom: 调整垂直位置
动画相关参数：调整动画时长和效果

这个实现方案具有以下优点：

纯原生JavaScript实现，无依赖
CSS动画性能优化
自动处理元素生命周期
响应式定位
支持多实例同时显示
良好的浏览器兼容性

相关推荐