Make Notifications fade/dissapear towards the right , with CSS and JS

user_13859835 0
Viewed 446

How would I make these notifications slide and fade away to the right instead of just disappearing? and also how to slide the other open notifications up instead of just jumping up?

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

I can't figure it out, I assume it has something to do with notifications[i].remove(); part. I tried a few different things last week and couldn't get anything working.

Thanks for the help!!

css html javascript
1 Answers

Just adding some keyframes (right now only webkit so not all browsers) will solve this, You can also very ealsy make it fade in with this just remove the 0% frame. here is a pen also doing the up movement: 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>

user_144848800
Related