feat:动起来了（但有bug）

src/components/sortChart.vue

@@ -3,23 +3,29 @@
     class="sortChart"
     :style="{'width':width + 'px', 'height': height+ 'px'}"
   >
-    <div class="container">
+    <!-- <div class="container"> -->
+    <transition-group
+      class="container"
+      name="flip-list"
+      tag="div"
+    >
       <div
-        v-for="(item,idx) in list"
-        :key="'k-'+idx"
+        v-for="item in listWithKey"
+        :key="item.key"
         class="bar"
         :style="{'height': getHeight(item.value)+ 'px'
-        ,'background-color': getColor(item.color)
-        ,'top': getTop(item.value) + 'px'
-        ,'width': itemWidth + 'px'
-        }"
+          ,'background-color': getColor(item.color)
+          ,'top': getTop(item.value) + 'px'
+          ,'width': itemWidth + 'px'
+          }"
       >
         <div
           class="value"
           :style="{'left': itemWidth / 2 - 7 + 'px'}"
         >{{Math.abs(item["value"])}}</div>
       </div>
-    </div>
+    </transition-group>
+    <!-- </div> -->
   </div>
 </template>
 
@@ -58,24 +64,101 @@
     data () {
       return {
         max: 20,
-        width: 200
+        width: 200,
+        listWithKey: []
       }
     },
-    created () {
+    mounted () {
+      this.listWithKey = list.map((item, idx) => {
+        return {
+          key: idx,
+          value: item.value,
+          color: item.color
+        }
+      });
     },
+    // computed: {
+    //   thisList (val) {
+    //     return this.list;
+    //   }
+    // },
     watch: {
-      list: function (data) {
-        this.max = Math.max(...data.map(v => v["value"]));
-        this.width = data.length * this.itemContainerWidth;
+      list: {
+        handler: function (data, old) {
+          if (data == null || data.length == 0) {
+            this.listWithKey = [];
+            return;
+          }
+          // console.log(data, old);
+          this.max = Math.max(...data.map(v => v["value"]));
+          this.width = data.length * this.itemContainerWidth;
+          if (old == null || old.length == 0) {
+            this.listWithKey = data.map((item, idx) => {
+              // console.log(idx);
+              return {
+                key: idx,
+                value: item.value,
+                color: item.color
+              }
+            });
+            // console.log(this.listWithKey);
+          } else this.diff(data, this.listWithKey);
+        },
+        immediate: true
       }
     },
     mounted () { },
     methods: {
+      diff (val, old) {
+        let status = {
+          v0c1: [], //value 不变， color改变 => 全部变色
+          v1c0: [], //value 变负， color不变 => 下移
+          v1c1: [], //value 变负， color改变 => 下移+变色
+          v2: [] //value 变其他数据 => 改变数据==2，交换； ！=2，直接重新赋值
+        };
+        // old = [{value:1,color:red,key:0}, {value:2,color:red,key:1}]
+        // val = [{value:2,color:red}, {value:1,color:red}]
+
+        for (let i = 0; i < val.length; i++) {
+          val[i]["key"] = old[i]["key"];
+        }
+        // console.log(val);
+        for (let i = 0; i < val.length; i++) {
+          if (old[i].value == val[i].value) {
+            if (old[i].color != val[i].color) {
+              status.v0c1.push(i);
+            }
+          } else if (old[i].value == -val[i].value) {
+            if (old[i].color == val[i].color) {
+              status.v1c0.push(i);
+            }
+            else {
+              status.v1c1.push(i);
+            }
+          } else {
+            status.v2.push(i);
+          }
+        }
+        if (status.v2.length > 0 && status.v2.length != 2) return;
+        status.v0c1.forEach(idx => this.$set(this.listWithKey, idx, val[idx]));
+        status.v1c0.forEach(idx => this.$set(this.listWithKey, idx, val[idx]));
+        status.v1c1.forEach(idx => this.$set(this.listWithKey, idx, val[idx]));
+        if (status.v2.length == 2) {
+          // console.log(status.v2);
+          let tmp = val[status.v2[1]].key;
+          val[status.v2[1]].key = val[status.v2[0]].key;
+          val[status.v2[0]].key = tmp;
+          this.$set(this.listWithKey, status.v2[1], val[status.v2[1]]);
+          this.$set(this.listWithKey, status.v2[0], val[status.v2[0]]);
+        }
+
+        // console.log(this.listWithKey);
+      },
       getTop (value) {
-        return value > 0 ? 0 : this.height;
+        return value >= 0 ? 0 : this.height;
       },
       getHeight (value) {
-        return (value < 0 ? -value : value) / this.max * this.height;
+        return (value < 0 ? -value : value) / this.max * this.height + 1;
       },
       getColor (color) {
         switch (color) {
@@ -89,8 +172,7 @@
         }
         return color;
       }
-    },
-    watch: {}
+    }
   }
 </script>
 
@@ -123,4 +205,7 @@
     -ms-user-select: none; /* IE */
     user-select: none;
   }
+  .flip-list-move {
+    transition: transform 0.5s;
+  }
 </style>