jquery - 一个一个显示div元素

Question

我创建了一些通知元素演示如下。如您所见，所有通知 div 都同时出现。当我切换重新加载按钮时，我想让它们一个接一个地出现。到目前为止，我尝试使用 each note 元素调用 toggleClass 函数，但是当我单击重新加载按钮。

另外，当我点击其中一个通知上的 (x) 时，它下面的其他通知会向上但平滑地移动(不像我的代码片段那样跳动)吗？

感谢任何帮助!

$(document).ready(function() {
  $(".note-float").addClass("note-float-view");
});


$(".note-content-right").click(function() {
  $(this).parent().fadeOut("slow");
});

$(".load-note").click(function() {
  $(".note-float").toggleClass("note-float-view", 2000);
});

.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;
}

.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 {
  background-color: green;
}

<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>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

如果我理解你想要什么，像这样的东西应该提供平滑的过渡:

//标记

<button id="refresh">
  toggle notifications
</button>

<section class="notifications-container">
  <div class="notification info">
    <span class="label">label</span>
    <span class="close-icon">&times;</span>
  </div>
  <div class="notification error">
    <span class="label">label</span>
    <span class="close-icon">&times;</span>
  </div>
  <div class="notification valid">
    <span class="label">label</span>
    <span class="close-icon">&times;</span>
  </div>
</section>

//JS

const ANIMATION_DURATION_MS = 200
let anyNotificationsHidden = false
const toggleAllNotificationsVisibility = () => {
  $('.notification').each((index, notification) => {
    const visibilityMethod = anyNotificationsHidden ? 'removeClass' : 'addClass'
    setTimeout(() => {
      $(notification)[visibilityMethod]('slide')
    }, index * ANIMATION_DURATION_MS)
  })
  anyNotificationsHidden = !anyNotificationsHidden
}
const closeNotification = event => {
  anyNotificationsHidden = true
  const $notification = $(event.currentTarget).parent('.notification')
  $notification.addClass('slide')
}

$('#refresh').on('click', toggleAllNotificationsVisibility)
$('.close-icon').on('click', closeNotification)

//SCSS

$notification-height: 3rem;
$notification-margin: 5px;
body {
  margin: 1rem;
}

#refresh {
  margin-bottom: 15px;
  z-index: 2;
}

.notifications-container {
  position: relative;
}

.notification {
  color: white;
  display: flex;
  font-family: sans-serif;
  align-items: center;
  height: $notification-height;
  padding-left: 1rem;
  position: relative;
  position: absolute;
  transition: all 1.5s;
  width: 90%;
  opacity: 1;
  &:nth-of-type(1) {
    top: 0;
  }
  &:nth-of-type(2) {
    top: calc(#{$notification-height} + #{$notification-margin});
  }
  &:nth-of-type(3) {
    top: calc(#{$notification-height} * 2 + #{$notification-margin} * 2);
  }
  &.info {
    background-color: lighten(blue, 15%);
    top: 0;
  }
  &.error {
    background-color: lighten(red, 15%);
  }
  &.valid {
    background-color: lighten(green, 15%);
  }
  &.slide {
    transform: translateY(-$notification-height * 4);
    opacity: 0;
  }
  .close-icon {
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    justify-content: center;
    position: absolute;
    display: flex;
    right: 1rem;
    border: 1px solid;
    padding: 0 0 1px;
    width: 1rem;
    line-height: 1rem;
    transition: background-color 0.2s;

    &:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}

working example

编辑:

如果不需要保持通知的原始顺序，您可以执行类似 this 的操作，但是，如果这是您需要保留的东西，DOM 操作可能会开始变得有点激烈，我可能会使用react并让它完成繁重的工作。