添加注释和修改动画效果

public/resource/css/public.css

@@ -99,13 +99,21 @@ a:hover{
     width: 12%;
     z-index: 1000;
     float: left;
-    animation: myfirst s;
+    animation: show-mulu-action 1.3s;   /*目录显示的动画效果（from透明  to 全部显示，用时1.5秒）*/
 }
 
-@keyframes myfirst
+@keyframes show-mulu-action
 {
-0% { width:0%}
-100% {width : 12%}
+0% { 
+	opacity:0.0;
+	position: relative;
+	left:-20px;
+	}
+100% {
+	opacity : 0.9;
+	position: relative;
+	left:0px;
+	}
 }
 
 #sidebar-wrapper::-webkit-scrollbar {

public/resource/js/public.js

@@ -105,10 +105,10 @@ define(['doT', 'jquery', 'text!temp/menu_template_tpl.html', 'layer'], function
     	var _this = $(this);
     		if($('.width-136-hide').find('span').text() == "隐藏"){
 	    	//if($.trim(_this.html()).indexOf("隐藏")!=-1){
-	    		//$('#hideLine').show();
-	    		$('.width-136-hide').removeClass("hideBtn1");
+	    		//$('#hideLine').show();     //隐藏一条线，作用是在目录隐藏的时候附加的一个显示效果
+	    		$('.width-136-hide').removeClass("hideBtn1");   
 	    		$('.width-136-hide').addClass("hideBtn2");
-	    		$('.width-136-hide').find('span').css("left","-17px");
+	    		$('.width-136-hide').find('span').css("left","-17px");  //通过绝对定位来操作文字的位置，如果后期有所偏移可以纪念性微调
 	    		$('#sidebar-wrapper').hide();
 	    		$('.width-136-hide').find('span').text("显示");
 	    		//_this.html('显示<img src="/resource/image/icon_down_hide@2x.png" class="text-icon-hide"/>');