如何实现Pug中错误提示框定时自动消失

1. 修正Pug模板的字段错误（必做） #

你后端代码中错误对象的属性是message，但Pug模板里写的是error.mensaje，这会导致错误内容无法正常显示，先修正这个问题，同时给提示框添加一个专属类方便后续JS控制：

if errores.length > 0
    each error in errores
        .alert.col.alert-danger.text-center.auto-dismiss= error.message

2. 添加JavaScript实现定时隐藏 #

在Pug模板的</body>标签前插入以下脚本，实现3-5秒后自动隐藏提示框：

script.
    document.addEventListener('DOMContentLoaded', function() {
        // 选中所有需要自动消失的提示框
        const alertElements = document.querySelectorAll('.auto-dismiss');
        
        alertElements.forEach(alert => {
            // 生成3000-5000毫秒的随机延迟（也可以写固定值如3000）
            const delay = Math.floor(Math.random() * 2000) + 3000;
            setTimeout(() => {
                // 平滑渐隐效果
                alert.style.opacity = '0';
                alert.style.transition = 'opacity 0.6s ease';
                // 渐隐完成后移除元素
                setTimeout(() => alert.remove(), 600);
            }, delay);
        });
    });

3. 可选：用CSS优化过渡效果 #

如果希望动画更流畅，可以在模板头部添加基础样式：

style.
    .auto-dismiss {
        transition: opacity 0.6s ease;
    }

替代方案（无需新增类） #

如果不想新增auto-dismiss类，也可以直接通过现有类选择提示框，把JS中的'.auto-dismiss'改成'.alert.alert-danger'即可。

内容的提问来源于stack exchange，提问作者Gerardo J. Cruz