Estoy tratando de hacer un botón que al hacer clic revele y expanda un div, dando la ilusión de que el botón en sí se convierte en el contenido, pero después de que se expandió, el segundo botón no reproduce la transición para cerrarlo y si hago clic en el primer botón de nuevo se abre sin transición también.

Dejaré aquí la muestra de jsFiddle en la que estaba trabajando.

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); }