新增排序组件动画效果

src/components/app-sort-bar/app-sort-bar.less

@@ -63,6 +63,22 @@
       }
     }
   }
-  .open-bar {
-    background-color: #EEF2F5;
+  .slide-in(@x-begin,@x-end,@c-begin,@c-end,@name){
+    @keyframes @name{
+      from {
+        transform: translateX(@x-begin);
+        background-color: @c-begin;
+      }
+      to {
+        transform: translateX(@x-end);
+        background-color: @c-end;
+      }
     }
+  }
+  .slide-in(1670px,0px,#fff,#EEF2F5,fadein);
+  .animation(@animation-name,@animation-duration,@animation-timing-function,@animation-delay,@play-state){
+    animation: @arguments;
+  };
+  .open-bar {
+    .animation(fadein,0.7s,linear,0s,forwards);
+  };
\ No newline at end of file

src/components/app-sort-bar/app-sort-bar.vue

 <template>
-<div :class="['app-sort-bar', isSort ? 'open-bar' : '']">
+<div :class="['app-sort-bar', isSort ? 'open-bar' : '',]">
     <row v-if="sortModel && sortModel.length>0" class="page-sort-bar" :gutter="10" type="flex" justify="start" style="margin:0px;">
             <template v-for="(item, index) in sortModel">
             <i-col v-show="isSort" :key="index" :class="getSortClass(item)">
+                <div >
                     <div @click="sortItemClick(item)">
                 <span class="sort-field-text"  >{{$t('entities.'+ entityName +'.fields.' + item)}}</span>
                 <span class="caret-wrapper">
@@ -10,6 +11,8 @@
                     <Icon type="md-arrow-dropdown" />
                 </span>
                 </div>
+                </div>
+                
             </i-col>
             </template>
         <div class="issort" @click="handleSort">
@@ -48,7 +51,6 @@ export default class AppSortBar extends Vue {
     }
 
     public sortItemClick(name: string) {
-        console.log(name);
         this.$emit('clickSort', name);
     }