通知元素逐个显示及删除平滑上移技术求助

我来帮你搞定这两个问题，咱们一步步拆解修改：

问题1：点击Reload按钮让通知逐个依次显示 #

原代码里直接批量操作所有通知，既没有重置初始状态，也没做延迟处理，所以点击后反而会隐藏所有通知。咱们调整逻辑：先重置所有通知到隐藏状态，再逐个添加显示类并设置递增延迟。

问题2：关闭通知时下方元素平滑上移 #

原代码用fadeOut会让元素直接消失，导致下方通知突然跳转。咱们结合CSS过渡属性，让通知淡出的同时，通过修改margin-bottom让下方元素平滑上移。

完整修改后的代码 #

JavaScript

$(document).ready(function() {
  // 页面加载时先隐藏所有通知
  $(".note-float").removeClass("note-float-view");

  // 关闭按钮事件：平滑淡出+下方元素上移
  $(".note-content-right").click(function() {
    const $targetNote = $(this).parent();
    // 先修改透明度和margin，触发CSS过渡
    $targetNote.css({
      opacity: 0,
      marginBottom: 0
    }).delay(1000).queue(function(next) {
      // 过渡完成后隐藏元素
      $(this).hide();
      next();
    });
  });

  // Reload按钮事件：逐个显示通知
  $(".load-note").click(function() {
    // 重置所有通知：显示并回到初始状态
    $(".note-float").show().removeClass("note-float-view");
    
    // 遍历通知，给每个设置递增延迟
    $(".note-float").each(function(index) {
      const $currentNote = $(this);
      setTimeout(function() {
        $currentNote.addClass("note-float-view");
      }, index * 500); // 间隔500ms显示一个，可自行调整
    });
  });

  // 页面加载完成后自动执行一次显示（可选，按需保留）
  $(".load-note").trigger("click");
});

CSS

.note-float-view {
  top: 24px !important;
  opacity: 1 !important;
  transition: top 1s, margin-bottom 1s, opacity 1s;
}
.note {
  padding: 14px 8px 14px 20px;
  font-size: 13px;
  margin-bottom: 48px;
  display: table;
  width: calc(100% - 32px);
  position: relative;
  top: 24px;
}
.note-float {
  top: 0;
  opacity: 0;
  margin-bottom: 16px;
  transition: top 1s, margin-bottom 1s, opacity 1s;
  position: relative; /* 确保top属性生效 */
}
.note-content-left {
  display: table-cell;
  width: 32px;
}
.note-content-center {
  display: table-cell;
  width: calc(100% - 64px);
}
.note-content-right {
  display: table-cell;
  width: 12px;
  text-align: center;
  cursor: pointer;
}
.info {
  background-color: #CAF1FF;
  color: #0099ff;
  border: solid 1px #B1DEFF;
}
.success {
  background-color: #DAFDDC;
  color: #117250;
}
.warning {
  background-color: #F8F2D7;
  color: #DD6F1E;
}
.error {
  background-color: #FFE2E2;
  color: #E9190C;
}
i.fa-info-circle {
  color: #0099ff;
}
i.fa-puzzle-piece, .close-warning {
  color: #DD6F1E;
}
i.fa-check-circle, .close-success {
  color: #117250;
}
i.fa-times-circle, .close-error {
  color: #E9190C;
}
.note-content-right > .fa-times {
  font-size: 11px;
  margin-right: 12px;
}
a.button {
  background-color: green;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
}

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<a class="button green-btn inline-btn load-note">Reload</a>
<div class="note note-float success">
  <div class="note-content-left">
    <i class="fas fa-check-circle"></i>
  </div>
  <div class="note-content-center">
    You have successfully added <b>1 item(s)</b>
  </div>
  <div class="note-content-right">
    <i class="fas fa-times close-success"></i>
  </div>
</div>
<div class="note note-float warning">
  <div class="note-content-left">
    <i class="fas fa-puzzle-piece"></i>
  </div>
  <div class="note-content-center">
    You have successfully deleted <b>1 item(s)</b>, but failed to delete <b>1 item(s)</b>
  </div>
  <div class="note-content-right">
    <i class="fas fa-times close-warning"></i>
  </div>
</div>
<div class="note note-float error">
  <div class="note-content-left">
    <i class="fas fa-times-circle"></i>
  </div>
  <div class="note-content-center">
    <b>BPJS TK:</b> Data is used on other module
  </div>
  <div class="note-content-right">
    <i class="fas fa-times close-error"></i>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

关键修改说明 #

1. 逐个显示逻辑：用each遍历所有通知，通过setTimeout给每个通知设置递增的延迟时间，实现依次弹出的效果，你可以修改500这个值来调整显示间隔。
2. 平滑关闭逻辑：关闭时先修改通知的opacity和margin-bottom，利用CSS过渡实现淡出+下方元素平滑上移，过渡完成后再隐藏元素，避免生硬跳转。
3. 初始状态重置：点击Reload按钮时，先把所有通知恢复到初始隐藏状态，再重新逐个显示，避免状态混乱。

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