使用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

我无法理解，我认为它与notificationsi.remove()；part有关。上周我试了几件不同的东西，但什么都没做。

谢谢你的帮助！！

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>

​