blended

by amirrahman132132

HTML

<div class="button">


  <button onclick="big(); delayed()">expand</button>
  <div id="content" class="fixed hidden">
    <p id="testo">just testing this thing</p>
    <button id="close" class="close" onclick="small()">X</button>
  </div>
  
  
</div>

CSS

.button {
  position:relative;
  width:100%;
  height:100%;
}

.button > button {
  position: absolute;
  left: 50vw;
  top: 50vw;
  color: white;
  background-color: pink;
  border: none;
  padding: 30px;
  cursor: pointer;
}

.button > button:hover {
  background-color: purple;
}

.fixed {
  position:absolute;
  background-color:pink;
  left: 50vw;
  top: 50vw;
  text-align: center;
  width: 100px;
  height: 75px;
  transition: width 1s, height 1s, left 1s, top 1s, position 1s;
}

.position {
  position:fixed;
}

.hidden {
  visibility:hidden;
}

.show {
  visibility:visible!important;
}

.bigger {
  width:100%;
  height:100%;
  left:0;
  top:0;
}

.close {
  border:none;
  visibility:hidden;
  background-color: red;
  position:absolute;
  top: 5px;
  right: 5px;
  color:white;
  cursor:pointer;
}

.close:hover {
  background-color: yellow;
  color:black;
}

#testo {
  visibility:hidden;
}

body {
  height:1000px;
}

JavaScript

function big() {
  var content = document.querySelector("#content")
 	content.onanimationend = function(e){
  	content.classList.add("position")
    console.log("working")
  }  
  content.classList.add('show');
  content.classList.add('bigger');
}

function small() {
  document.getElementById("content").classList.remove('bigger');
  document.getElementById("content").classList.remove('position');
  setTimeout(()=>{
    document.getElementById("content").classList.remove("show");
  }, 1000);
  document.getElementById("testo").classList.remove('show');
  document.getElementById("close").classList.remove('show');
}

function delayed() {
  setTimeout(function(){document.getElementById("testo").classList.add('show');},1100);
  setTimeout(function(){document.getElementById("close").classList.add('show');},1100);
}