javascript - 使用 CSS 和 JS 使通知向右淡出/消失

Question

如何让这些通知向右滑动和淡出而不是消失？以及如何将其他打开的通知向上滑动而不是直接向上滑动？

HTML

<div class="buttons">
  <h1>Notifications</h1>
  <button onclick="notifySuccess()">
    Success
  </button>
  <button onclick="notifyError()">
    Error
  </button>
  <button onclick="notifyInfo()">
    Info
  </button>
</div>

<div id="notification-area">
</div>

CSS

* {
  font-family:"Raleway";
}
#notification-area {
  position:fixed;
  top:0px;
  right:10px;
  width:250px;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-top;
}
#notification-area .notification {
  position:relative;
  padding:15px 10px;
  background:#111;
  color:#f5f5f5;
  font-family:"Raleway";
  font-size:14px;
  font-weight:600;
  border-radius:5px;
  margin:5px 0px;
  opacity:0;
  left:150px;
  animation:showNotification 500ms ease-in-out forwards;
}
@keyframes showNotification {
  to {
    opacity:1;
    left:0px;
  }
}
#notification-area .notification.success {
  background:#389838;
}
#notification-area .notification.error {
  background:orangered;
}
#notification-area .notification.info {
  background:#00acee;
}

JS

function notify(type,message){
  (()=>{
    let n = document.createElement("div");
    let id = Math.random().toString(36).substr(2,10);
    n.setAttribute("id",id);
    n.classList.add("notification",type);
    n.innerText = message;
    document.getElementById("notification-area").appendChild(n);
    setTimeout(()=>{
      var notifications = document.getElementById("notification-area").getElementsByClassName("notification");
      for(let i=0;i<notifications.length;i++){
        if(notifications[i].getAttribute("id") == id){
          notifications[i].remove();
          break;
        }
      }
    },5000);
  })();
}

function notifySuccess(){
  notify("success","This is demo success notification message");
}
function notifyError(){
  notify("error","This is demo error notification message");
}
function notifyInfo(){
  notify("info","This is demo info notification message");
}

https://codepen.io/shane9b3/pen/RwRpePw

我想不通，我认为它与 notifications[i].remove(); 有关部分。上周我尝试了一些不同的东西，但没有任何效果。

感谢您的帮助!

Answer 1

只要添加一些关键帧(目前只有 webkit，所以不是所有浏览器)就可以解决这个问题，您也可以非常轻松地使其淡入，只需删除 0% 帧即可。这是一支笔也在向上移动:https://codepen.io/tovernaar123/pen/wvWyBRr

function notify(type,message){
  (()=>{
    let n = document.createElement("div");
    let id = Math.random().toString(36).substr(2,10);
    n.setAttribute("id",id);
    n.classList.add("notification",type);
    n.classList.add("fade_out")
    n.innerText = message;
    document.getElementById("notification-area").appendChild(n);
    setTimeout(()=>{
      var notifications = document.getElementById("notification-area").getElementsByClassName("notification");
      for(let i=0;i<notifications.length;i++){
        if(notifications[i].getAttribute("id") == id){
          notifications[i].remove();
          break;
        }
      }
    },5000);
  })();
}

function notifySuccess(){
  notify("success","This is demo success notification message");
}
function notifyError(){
  notify("error","This is demo error notification message");
}
function notifyInfo(){
  notify("info","This is demo info notification message");
}

* {
  font-family:"Raleway";
}
#notification-area {
  position:fixed;
  top:0px;
  right:10px;
  width:250px;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
#notification-area .notification {
  position:relative;
  padding:15px 10px;
  background:#111;
  color:#f5f5f5;
  font-family:"Raleway";
  font-size:14px;
  font-weight:600;
  border-radius:5px;
  margin:5px 0px;
  opacity:0;
  left:20px;
  animation:showNotification 500ms ease-in-out forwards;
}

@-webkit-keyframes fadeInFromNone {
     0% {
         display: none;
         opacity: 1;
     }

     50% {
         display: none;
         opacity: 1;
     }

    100% {
        display: block;
        opacity: 0;
    }
}

#notification-area .fade_out {
  -webkit-animation: fadeInFromNone 5s ease-out;
}

@keyframes showNotification {
  to {
    opacity:1;
    left:0px;
  }
}
#notification-area .notification.success {
  background:#389838;
}
#notification-area .notification.error {
  background:orangered;
}
#notification-area .notification.info {
  background:#00acee;
}

<div class="buttons">
  <h1>Notifications</h1>
  <button onclick="notifySuccess()">
    Success
  </button>
  <button onclick="notifyError()">
    Error
  </button>
  <button onclick="notifyInfo()">
    Info
  </button>
</div>

<div id="notification-area">
</div>