JSFiddle - React, Tailwind, and code Playground

by zoe chen

HTML

<ul class="messageList">

</ul>
<button class="btn">
来一个
</button>

CSS

.messageList {
  position: absolute;
  width: 272px;
  top: 72px;
  right: 24px;
  z-index: 701;
  list-style: none;
  transition: height 2s;
}

.messageList>li {
  margin-bottom: 8px;
}

.messageBox {
  position: relative;
  width: 272px;
  margin-left: 296px;
  border-radius: 4px;
  box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.12);
  padding: 8px 12px 16px 12px;
  transition: all 2s, opacity .2s;
  animation: changeBackgroundColor 6s 1 cubic-bezier(0, 0.53, .57, .99) forwards;
  background-color: #fff;
  overflow: hidden;
}

.messageBox>.title {
  font-weight: 600;
  width: 220px;
}

.messageBox>div>p {
  color: rgba(50, 55, 69, 0.5);
  font-size: 14px;
}

.messageBox>p {
  font-size: 14px;
  width: 220px;
}

.messageBox>svg {
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
}

.messageBox_b {
  border-top: 4px solid #03A9F4;
}

@keyframes changeBackgroundColor {
  6% {
    margin-left: 0;
    max-height: 0;
    animation-timing-function: cubic-bezier(0, 0.53, .57, .99);
  }
  94% {
    margin-left: 0;
    animation-timing-function: cubic-bezier(.69, 0.01, .73, .98);
  }
  100% {
    margin-left: 296;
    max-height: 900px;
  }
}

JavaScript

let n = 0
let MessageNotification = function() {
  console.log(1)
  n++
  let a
  clearTimeout(a)
  let messageBox = `<li class="messageBox messageBox_singletitle messageBox_b">
            <p class="title">New Shift</p>
            <div>
                <p>09:41 am - 11:45 pm, Sep 12</p>
                <p>Location | Position</p>
            </div>
            <svg class="tinysvgs svg16 svg-closeMessage" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#cancel"></use></svg>
        </li>`
  $(".messageList").prepend(messageBox)
  let c = $(".messageList>li.messageBox:first-child")
  console.log(c, $(".messageList>li.messageBox"))
  a = setTimeout(() => {
    c.remove()
  }, 6000)
  $(".messageBox>.svg-closeMessage").on("click", function() {
    let this_messageBox = $(this).parent()
    this_messageBox.css("opacity", '0')
    let b
    clearTimeout(b)
    b = setTimeout(() => {
      this_messageBox.remove()
    }, 200)
  })
}
$(".btn").on("click", MessageNotification)