如何为自定义通知添加绑定timer变量的带动画效果彩色进度条

实现方案 #

你可以通过CSS变量绑定时长+ease-out缓动动画实现需求，不需要引入额外依赖，改动量很小：

1. 修改JS逻辑 #

调整通知结构，新增进度条子元素，同时把timer值作为CSS变量注入到通知元素上，实现时长绑定：

$(document).ready(function(){
    window.addEventListener("message",function(event){
        var html = `<div id='${event.data.css}' style='--timer: ${event.data.timer / 1000}s'>
            ${event.data.mensagem}
            <div class="notification-progress"></div>
        </div>`
        $(html).fadeIn(500).appendTo("#notifications").delay(event.data.timer).fadeOut(500);
    })
});

2. 新增/修改CSS样式 #

先给原有通知组件加相对定位作为进度条的父级定位容器，再写进度条的动画规则：

#sucesso {
    position: relative; /* 新增，作为进度条定位父级 */
    background: rgba(34,34,34,0.75) url("images/check.png") no-repeat center left 11px;
    border-bottom: 3px solid #a3c846;
    padding: 12px 15px 12px 40px; /* 可根据原有样式调整内边距，避免文字和进度条重叠 */
}

/* 进度条基础样式 */
.notification-progress {
    position: absolute;
    bottom: -3px; /* 若要完全放在border下方不重叠，可改为-6px，数值可自定义调整间距 */
    left: 0;
    height: 3px;
    width: 100%;
    /* 彩色渐变可根据设计需求自行修改 */
    background: linear-gradient(90deg, #a3c846, #6ea100, #a3c846);
    /* ease-out时间函数天然实现动画先快后慢、逐渐减速的效果 */
    animation: progressAnimation var(--timer) ease-out forwards;
}

/* 进度条动画规则：从满宽收缩到0 */
@keyframes progressAnimation {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

3. HTML代码无需改动 #

直接沿用你现有结构即可，不需要额外调整。

内容的提问来源于stack exchange，提问作者Lucas Soares