Animated dismiss all button

animated-dismiss-all-button.markdown

Animated dismiss all button

A simple animated dismiss all button to dismiss notifications

A Pen by IpsumLorem16 on CodePen.

License.

index.html

<button class="dismiss-all-btn" data-no-focus-on-click>
  <div class="dismiss-all-icon">
    <div class="icon-bar top"></div>
    <div class="icon-bar middle"></div>
    <div class="icon-bar bottom"></div>
  </div>
</button>

script.js

const dismissAllBtn = document.querySelector(".dismiss-all-btn");

dismissAllBtn.addEventListener("click", () => {
  console.log('click');
  dismissAllBtn.setAttribute('disabled','');
  dismissAllBtn.blur();
  dismissAllBtn.classList.add("slide-out");
  //remove button when animation complete 
  setTimeout(()=>{
    dismissAllBtn.classList.add('hidden');
  },210);
  
  //reset button for demo
  setTimeout(() => {
    dismissAllBtn.classList.remove("slide-out");
    dismissAllBtn.removeAttribute('disabled','');
    dismissAllBtn.classList.remove('hidden');
  }, 800);
});

//prevent outline on click, while allowing to be focusable from keyboard
document.addEventListener("mousedown", event => {
  if (event.target.hasAttribute("data-no-focus-on-click")) {
    event.preventDefault();
  }
});

style.scss

body {
  background-color: #a700a7;
}
.dismiss-all-btn {
  display: inline-block;
  margin-top: 20px;
  margin-left: 20px;
  cursor: pointer;
  padding: 0;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
  
  .dismiss-all-icon {
    height: 13px;
    width: 20px;
    position: relative;
    overflow: hidden;
    pointer-events:none;
    .icon-bar {
      position: absolute;
      width: 14px;
      height: 3px;
      background-color: white;
      &.top {
        left:0px
      }
      &.middle {
        top: 5px;
        left: 3px;
      }
      &.bottom {
        right: 0px;
        top: 10px;
      }
    }
  }
  &.slide-out .icon-bar {
    &.top {
      animation: slide-out-right 0.1s 0.1s forwards;
    }
    &.middle {
      animation: slide-out-right 0.1s 0.05s forwards;
    }
    &.bottom {
      animation: slide-out-right 0.1s 0s forwards;
    }
  }
}
@keyframes slide-out-right {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(60%);
  }
}
.hidden {
  display: none !important;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet" />