Animated dismiss all button { as an object }

animated-dismiss-all-button-as-an-object.markdown

Animated dismiss all button { as an object }

A simple animated dismiss all button to dismiss notifications.

tidyed up, add more functions, and put inside an object

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 = {
  element: document.querySelector(".dismiss-all-btn"),
  slideout() {
    this.disable();
    this.element.classList.add("slide-out");
    setTimeout(() => {
      this.element.classList.add("hidden");
      this.element.classList.remove("slide-out");
    }, 210);
  },
  hide() {
    this.disable();
    this.element.classList.add("fade-out");
    setTimeout(() => {
      this.element.classList.add("hidden");
      this.element.classList.remove("fade-out");
    }, 140);
  },
  show() {
    this.element.classList.remove("hidden");
    this.enable();
  },
  enable() {
    this.element.removeAttribute("disabled");
  },
  disable() {
    this.element.setAttribute("disabled", "");
    this.element.blur();
  },
  handleClick() {
    this.slideout();
    //dismiss notifications..
    //re-show for demo
    setTimeout(() => {
      this.show();
    }, 800);
  },
  init() {
    this.element.addEventListener("click", () => {
      this.handleClick();
    });
  }
};

dismissAllBtn.init();

//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;
  animation: fade-in 0.14s forwards;
  &.fade-out {
    opacity:1;
    animation: fade-out .14s;
  }
  .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%);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.hidden {
  display: none !important;
}

styles

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