Javascript code does not make CSS transitions

function jmgModal(id1, data, ok, input) {
    data=data || {};
    id="modal-"+id1;
    
    if (document.getElementById(id)!=null) {
        //document.getElementById(id).remove();
        var divis  = document.getElementById(id);
         document.body.removeChild(divis);
    }
        var d=document.createElement("div");
         //d.style.visibility='visible';
        d.className="jmgmodal";
        d.id=id;
       
        var p=document.createElement("div");
        p.className="panel";
        p.id="panelp";
        //p.style.maxWidth ="450px";
        //p.style.maxHeight ="50px";
        var t=document.createElement("div");
        t.className="title";
        t.id="titlet";
       t.innerHTML=data.title;
        var cl=document.createElement("div");
        cl.className="close";
       // cl.innerHTML='×';
        cl.id="c1id";
        var ct=document.createElement("div");
        ct.className="content";
        ct.id="ct";
        ct.innerHTML=data.content;
        var f=document.createElement("div");
        f.className="footer";
        f.id="foot";
        
        var but=document.createElement("button");
        but.className="action";
        but.innerHTML=ok[0];
        but.addEventListener('click',function(ev) {
            try{
             var divisi  = document.getElementById(id);            
             document.body.removeChild(divisi);
            }catch(Error){alert(Error);}
        });
        
        f.appendChild(but);
        p.appendChild(t);p.appendChild(cl);p.appendChild(ct);p.appendChild(f);
        d.appendChild(p);
        document.body.appendChild(d);
    
        window.setTimeout(function() {
          d.classList.add('visible');
        },100);
   
}

jQuery(document).ready(function() {

  jQuery('#abre_modal').on('click',function() {
  
    jmgModal(1,{title:'Mi Modal', content:'Este es el contenido del modal'},['cerrar']);
  
  });

});

.jmgmodal {
        position: absolute; margin: 0 auto;
        top:0;left:35%; 
        width:70%;
        background: rgba(34,34,68,.8);
        box-sizing: content-box;
        visibility: visible; opacity: 0;
        transition: all .5s; z-index: 99;
}
.jmgmodal.visible {
        top:15%;
        opacity: 1;
}
.jmgmodal * {box-sizing: inherit}
.jmgmodal .panel {
        position: absolute; margin: 0 auto;
      /*  top:0;left:0;right:0;bottom:0;*/
        max-width: 450px; max-height: 50vh;
        background: white; border-radius: 10px;
        color: #ffffff; padding: 50px 0;
        transform: translateY(-25%);
        transition: all .12s;
}
.jmgmodal.nofooter .panel {
        padding: 50px 0 0 0;
}
.jmgmodal.visible .panel {
        transform: none;
}
.jmgmodal .title {
        position: absolute; top: 0;
        width: 100%; height: 50px;
        line-height: 50px;
        background:#2ECCFA;
        font-weight: bolder; padding: 0 2em;
        box-shadow: 2px 0 10px rgba(0,0,0,.6);
        border-radius: 10px 10px 0 0;
        box-sizing: border-box;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
}
/* TEXTO DE CERRAR*/
.jmgmodal .panel .close {
        position: absolute; top: .25em; right: .75em;
        cursor: pointer; font-size: 25px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
}
.jmgmodal .panel .content {
        margin-left: 0px;
        color:#999;
        font-family: verdana;
        font-size: 12px;
        width: 100%;
        height: 100%; overflow: auto;
        padding: 1em; box-sizing: border-box;
}
.jmgmodal .panel .content iframe:only-child {
        border: 0; width: 100%;
        height: 100%;
}
.jmgmodal .panel .content img:only-child {
        width: 100%; width: 100%;
}
.jmgmodal .panel .footer {
        position: absolute; bottom: 0;
        width: 100%; background: #2ECCFA;
        font-weight: bolder; padding: 0 .5em;
        box-shadow: 2px 0 10px rgba(0,0,0,.6);
        border-radius: 0 0 10px 10px;
        box-sizing: border-box;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: right;
}
.jmgmodal .panel .footer .action {
        border-radius: 10px; color: #000;
        background: #fff; border: 0;
        min-width: 80px; min-height: 35px;
        font-weight: bold; cursor: pointer;
        transition: all .12s;
}
.jmgmodal .panel .footer .action:hover {
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="abre_modal">Abrir Modal</button>