如何实现通知到达时文本闪烁、点击后停止闪烁的交互效果？

1. 添加CSS闪烁样式 #

/* 定义闪烁动画 */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
/* 闪烁类，绑定动画 */
.blink {
  animation: blink 1s linear infinite;
}

你可以根据需求调整动画时长、闪烁频率，只要修改blink动画的参数即可。

2. 修正HTML结构（可选） #

你现有HTML存在标签嵌套错误（行内元素span嵌套块级元素ul不符合规范），可以调整为如下结构，不影响原有功能：

<div class="notification-wrap">
  <span class="label label-success" id="indi"></span>
  <ul class="dropdown-menu">
    <ul class="menu" id="new_message">
    </ul>
  </ul>
</div>

3. 调整JavaScript逻辑 #

修改原有JS代码，新增通知存在判断、闪烁触发、点击停止闪烁的逻辑：

$(document).ready(function() {
    // 页面加载完成后先拉取一次通知
    loadNotification();

    // 每秒拉取最新通知
    setInterval(loadNotification, 1000);

    // 点击通知区域停止闪烁
    $(document).on('click', '#indi, #new_message li', function() {
        $('#indi').removeClass('blink');
    });

    // 封装拉取通知的公共方法
    function loadNotification() {
        $("#new_message").load('new_notification');
        // 拉取通知标识后判断是否需要闪烁
        $("#indi").load('indi', function() {
            const notificationText = $(this).text().trim();
            // 当通知标识有内容（存在未读通知）时添加闪烁类
            if (notificationText && notificationText.length > 0) {
                $('#indi').addClass('blink');
            } else {
                // 没有未读通知时移除闪烁
                $('#indi').removeClass('blink');
            }
        });
    }
});

逻辑说明 #

• 封装了公共的拉取通知方法loadNotification，避免重复代码
• 在#indi拉取完成的回调中判断内容，存在未读通知时自动添加闪烁类
• 监听通知标识、通知列表项的点击事件，用户点击后直接移除闪烁类，停止闪烁效果
• 如果通知被服务端标记为已读、#indi内容清空时，也会自动停止闪烁

内容的提问来源于stack exchange，提问作者Gaming With Shady Wolf