i'm trying to make a button that on click reveals and expand a div, giving the illusion that the button itself turns into the content, but after it expanded the second button doesn't play the transition to close it and if i click the first button again it opens without transition as well.

I'll leave here the jsFiddle sample that i was working on

html

    <div class="button">


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

css

  .button {
      position:relative;
      width:100vw;
      height:100vh;
    }
    
    .button > button {
      position:absolute;
      left: 50%;
      top:50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color:white;
      background-color:pink;
      border:none;
      padding: 30px;
      cursor: pointer;
    }
    
    .button > button:hover {
      background-color: purple;
    }
    
    .fixed {
      position:fixed;
      background-color:pink;
      left: 43.6vw;
      top: 29.4vw;
      text-align: center;
      width: 100px;
      height: 75px;
      transition: width 1s, height 1s, left 1s, top 1s;
    }
    
    .hidden {
      visibility:hidden;
    }
    
    .show {
      visibility:visible!important;
    }
    
    .bigger {
      width:100%;
      height:100%;
      left:0;
      top:0;
    }
    
    .close {
      border:none;
      background-color: red;
      position:absolute;
      top: 5px;
      right: 5px;
      color:white;
      cursor:pointer;
    }
    
    .

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

#testo {
  visibility:hidden;
}

js

    function big() {
  document.getElementById("content").classList.add('show');
  document.getElementById("content").classList.add('bigger');
}

function small() {
  document.getElementById("content").classList.remove('show');
  document.getElementById("testo").classList.remove('show');
}

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

CodePudding user response：

You're not removing the bigger class. Remove that first, then remove the show class after a 1 second delay so the transition has time to complete.

function big() {
  document.getElementById("content").classList.add('show');
  document.getElementById("content").classList.add('bigger');
}

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

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

.button {
  position:relative;
  width:100vw;
  height:100vh;
}

.button > button {
  position:absolute;
  left: 50%;
  top:50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color:white;
  background-color:pink;
  border:none;
  padding: 30px;
  cursor: pointer;
}

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

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

.hidden {
  visibility:hidden;
}

.show {
  visibility:visible!important;
}

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

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

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

#testo {
  visibility:hidden;
}

<div class="button">


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