动画在DOM大小增加时不能顺利运行

Question

我正在对我的一些内容应用动画，如果DOM大小很小（大约元素是1456），并且如果DOM大小增加到14556个元素，那么动画工作正常，那么动画的工作就不顺利了并且显得扭曲。

我正在使用此切换类功能。

/ Toggle Full Screen/ normal screen mode of cell view /    
 function toggleFullScreen(){
      var zoomBtn = document.getElementById("cell-zoom-btn");
      var viewContainer  = document.getElementById("cellview");
      var viewClass      = viewContainer.className;

      //if view is already zoomed then bring it to normal and vice-versa
      if(viewClass.indexOf('zoom') > -1){
       $(viewContainer).removeClass('zoom');
       //changing icons on zoom btn expand icon --> <-- compress icon
       $(zoomBtn).removeClass('compress').addClass('expand');
      }
      else{
       $(viewContainer).addClass('zoom');
       $(zoomBtn).removeClass('expand').addClass('compress');
      }
 }

并使用下面的css。

.cellmodal{
 height:95%;
 width:80%;
 margin:auto;
 position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
 overflow-x:visible;
 box-sizing:border-box;
 display:none;
 -webkit-transition: all 400ms cubic-bezier(0.705, 0, 0.855, 1); / older webkit /
 -webkit-transition: all 400ms cubic-bezier(0.705, -0.600, 0.855, 1.190); 
   -moz-transition: all 400ms cubic-bezier(0.705, -0.600, 0.855, 1.190); 
     -o-transition: all 400ms cubic-bezier(0.705, -0.600, 0.855, 1.190); 
        transition: all 400ms cubic-bezier(0.705, -0.600, 0.855, 1.190); / custom /
}

.cellmodal.zoom{
 height:98%;
 width:95%;
}