update collaspe arrow animation

style/components/collapse.less

@@ -2,22 +2,11 @@
 @borderStyle: 1px solid #d9d9d9;
 
 #arrow {
-  .common(){
-    width: 0;
-    height: 0;
-    font-size: 0;
-    line-height: 0;
-  }
-  .right(@w, @h, @color) {
-    border-top: @w solid transparent;
-    border-bottom: @w solid transparent;
-    border-left: @h solid @color;
+  .close() {
+    .iconfont-size-under-12px(7px, 270deg);
   }
-
-  .bottom(@w, @h, @color) {
-    border-left: @w solid transparent;
-    border-right: @w solid transparent;
-    border-top: @h solid @color;
+  .open() {
+    .iconfont-size-under-12px(7px, 360deg);
   }
 }
 
@@ -35,24 +24,28 @@
     > .@{prefixCls}-header {
       height: 38px;
       line-height: 38px;
-      text-indent: 16px;
+      padding-left: 16px;
       color: #666;
       cursor: pointer;
       &:before {
+        font-family: "anticon" !important;
+        color: #666;
         display: inline-block;
-        content: '\20';
-        #arrow > .common();
-        #arrow > .right(3px, 4px, #666);
-        vertical-align: middle;
         margin-right: 8px;
+        content:"\e60f";
+        #arrow > .close();
+        vertical-align: middle;
+        transition: transform 0.24s ease;
+        position: relative;
+        top: -1px;
       }
     }
   }
 
   &-content {
     height: 0;
-    transition-duration: .3s;
-    transition-timing-function: @ease-out;
+    transition-duration: .24s;
+    transition-timing-function: @ease-out-circ;
     overflow: hidden;
     color: @text-color;
     padding: 0 16px;
@@ -77,10 +70,8 @@
     > .@{prefixCls}-header {
 
       &:before {
-        #arrow > .bottom(3px, 4px, #666);
-        margin-right: 6px;
+        #arrow > .open();
       }
     }
   }
 }
-

style/mixins/compatibility.less

@@ -5,9 +5,9 @@
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation);
 }
 
-// support rotate for all browsers
-.cross-rotate(@degrees) {
-  .rotate(@degrees);
+// rotate for ie8 and blow
+// degrees unit
+.ie-rotate-via-degrees(@degrees) {
   /* IE6-IE8 */
   @radians: ~`parseInt("@{degrees}") * Math.PI * 2 / 360`;
   @costheta: ~`Math.cos("@{radians}")`;
@@ -17,14 +17,21 @@
   zoom: 1;
 }
 
+// support rotate for all browsers
+.cross-rotate(@degrees) {
+  .rotate(@degrees);
+  .ie-rotate-via-degrees(@degrees);
+}
+
 // for iconfont font size
 // fix chrome 12px bug, support ie
-.iconfont-size-under-12px(@iconfontSize) {
+.iconfont-size-under-12px(@size, @rotate: 0deg) {
   display: inline-block;
-  @font-scale: unit(@iconfontSize/@font-size-base);
+  @font-scale: unit(@size/@font-size-base);
   font-size: @font-scale;
-  font-size: ~"@{iconfontSize} \9"; // ie8-9
-  .scale(@font-scale);
+  font-size: ~"@{size} \9"; // ie8-9
+  transform: scale(@font-scale) rotate(@rotate);
+  .ie-rotate-via-degrees(@rotate);
   :root & {
     font-size: @font-size-base; // reset ie9 and above
   }