转型的绩效问题

Question

我正在Jquery写一个日历。

现在我想淡出并淡出不同的视图（天，月，年，十年等）。

我尝试使用Jquery.animation，但是一位朋友告诉我，使用CSS过渡表现更好。

所以我使用了CSS过渡，但表现很疯狂。有时它的光滑和完美，但当我点击快速或经常它总是滞后。

我只是改变了Div的宽度和高度。我该怎么做才能提高性能？

这是如何实现的：

 $('#Monat-Jahr').click(function openMonth() {

        
        if(   $('#tableKalender').hasClass('open')){
                $('#tableKalender').removeClass('open');     
        };     
        $('#tableKalender').addClass('close');       
        $('#Kalender').addClass('close');
        $('#Clock').addClass('close');                 
        $('#CalendarClock').css("visibility","hidden");
        $('#Kalender').css("visibility","hidden");
    
        $('#btnMonate').css("visibility","visible");
        if ($('#Monate').hasClass('close')) {
                $('#Monate').removeClass('close');
        }            
        $('#Monate').addClass('open');
        $('#Monate').css("visibility", "visible");
    });

#tableKalender {
     width: 246px;
    height: 165px;
    font-family: Calibri;
    font-size: 10pt;
    transition: all 0.5s linear 0s;
    overflow: hidden;
    margin-right: 4px;       
}
    #tableKalender.close {
        width:0px ;
        height:0px ;   

    }
    #tableKalender.open {
       width:246px;
       height:165px;
    }  

    <div id="CalendarClock" >
        <div id="btnKalender">
  
    <button id="icon" class="fa fa-calendar backGrey"></button>     
	<input id="Monat-Jahr"  class="backGrey"    type="button" />
	<button id="PrevMonat" 	class="fa fa-caret-left  backGrey" ></button>
	<input id="Heute" 		class="backGrey" 	type="button" value="Heute"  />
	<button id="NextMonat"   class="fa fa-caret-right backGrey" ></button>
	<button id="Close" 		class="fa fa-times backGrey" 	></button>      
 </div>

<div id="Kalender">  
<Table id="tableKalender" class="loaded" cellspacing="0px">        
<TR>
	<th style="font-weight:bold ; vertical-align:middle;
    text-align:center;">KW</th>
	<th class="thGrey1">Mo</th>
	<th class="thGrey">Di</th>
	<th class="thGrey">Mi</th>
	<th class="thGrey">Do</th>
	<th class="thGrey">Fr</th>
	<th class="thGrey redWeekend">Sa</th>
	<th class="thGrey redWeekend">So</th>
</TR>
<TR>
	<th id="KW1" class="kwDay"></th>
	<td id="Day1"></td>
	<td id="Day2" ></td>
	<td id="Day3"></td>
	<td id="Day4" ></td>
	<td id="Day5" ></td>
	<td id="Day6" class="redWeekend"></td>
	<td id="Day7" class="redWeekend"></td>
</TR>
<TR>
	<th id="KW2" class="kwDay"></th>
	<td id="Day8" ></td>
	<td id="Day9" ></td>
	<td id="Day10"></td>
	<td id="Day11" ></td>
	<td id="Day12"></td>
	<td id="Day13"class="redWeekend"></td>
	<td id="Day14" class="redWeekend"></td>
</TR>
<TR>
	<th id="KW3" class="kwDay"></th>
	<td id="Day15" ></td>
	<td id="Day16" ></td>
	<td id="Day17" ></td>
	<td id="Day18" ></td>
	<td id="Day19" ></td>
	<td id="Day20" class="redWeekend"></td>
	<td id="Day21" class="redWeekend"></td>
</TR>
<TR>
	<th id="KW4" class="kwDay"></th>
	<td id="Day22"></td>
	<td id="Day23"></td>
	<td id="Day24" ></td>
	<td id="Day25" ></td>
	<td id="Day26" ></td>
	<td id="Day27" class="redWeekend"></td>
	<td id="Day28" class="redWeekend" ></td>
   </TR>
<TR>
	<th id="KW5" class="kwDay"></th>
	<td id="Day29" ></td>
	<td id="Day30" ></td>
	<td id="Day31" ></td>
	<td id="Day32"></td>
	<td id="Day33" ></td>
	<td id="Day34"class="redWeekend"></td>
	<td id="Day35"class="redWeekend"></td>
</TR>
<TR>
	<th id="KW6" class="kwDay"></th>
	<td id="Day36" class="noBorderBottom" ></td>
	<td id="Day37" class="noBorderBottom" ></td>
	<td id="Day38" class="noBorderBottom"></td>
	<td id="Day39" class="noBorderBottom"></td>
	<td id="Day40" class="noBorderBottom"></td>
	<td id="Day41"class="redWeekend noBorderBottom"></td>
	<td id="Day42"class="redWeekend noBorderBottom"></td>
</TR>
</Table>
  </div>
      </div>