JSFiddle - React, Tailwind, and code Playground

HTML

<button id="boton">X</button>
<div id="bloque"></div>
<p>Texto que deberĂ­a subir</p>

CSS

#bloque{width:500px;height:50px;background-color:red;opacity:1;-moz-opacity:1;filter:alpha(opacity:0);}

JavaScript

var estado=true;
var opacidad=1;
var timerFade;

document.getElementById('boton').onclick=function(){
  if(estado){
    estado=false;
  }else{
    estado=true;
  }
  timerFade=setInterval(fade,50);
}

function fade(){
  if(estado){
    opacidad+=0.05;
    actualizarVisibilidad();
  }else{
    opacidad-=0.05;
    actualizarVisibilidad();
  }
}

function actualizarVisibilidad(){
  
  if(opacidad<0.001){
    opacidad=0;
    document.getElementById('bloque').style.display='none';
    clearInterval(timerFade);
    
  }else{
    document.getElementById('bloque').style.display='block';
  }
  if(opacidad>0.999){
    opacidad=1;
    clearInterval(timerFade);
  }
  document.getElementById('bloque').style.opacity=opacidad;
}