alert transition

by Torwan

HTML

<div class="container">
  <div class="note">
    Tap
  </div>
  <div class="alert">
  </div>
</div>

CSS

.container .alert {
  transform: translateY(130%);
  transition-timing-function: ease-in;
  transition: 0.2s;
}
.container.alert-is-shown .alert {
  transition: 2.25s;
  transition-timing-function: ease-out;
  
  transform: translateY(0);
  opacity: 1;
}

.container {
  width: 180px;
  margin: 0 auto;
  border: 10px solid #666666;
  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 80px 80px / 25px 25px 25px 25px;
  &::before {
    content: "";
    background: #666666;
    position: absolute;
    z-index: 20;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
  }
  &::after {
    content: "";
    background: #848484;
    position: absolute;
    z-index: 20;
    bottom: 30px;
    left: 0;
    width: 100%;
    height: 25px;
  }
}

.alert {
  width: 90%;
  height: 60px;
  left: 5%;
  bottom: 70px;
  background: white;
  border-radius: 4px;
  opacity: 0;
  box-shadow: 0 5px 15px rgba(black, 0.2);
  position: absolute;
  z-index: 10;
}

body {
  padding: 40px;
  background: #EEEEEE;
}
.note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 12px monospace;
  color: #999;
  text-transform: uppercase;
}

JavaScript

// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need
  }
};

var containers = document.querySelectorAll(".container");

forEach(containers, function(index, value) {
  value.addEventListener("click", function() {
    this.classList.toggle("alert-is-shown");
  });
});