Legend toggle animation improvement

src/chart/bar/BarView.js

@@ -18,7 +18,7 @@ define(function (require) {
             var group = this.group;
             var data = seriesModel.getData();
 
-            data.diff(this.data)
+            data.diff(this._data)
                 .add(function (dataItem, idx) {
                     // 空数据
                     if (dataItem.getValue() == null) {
@@ -52,16 +52,21 @@ define(function (require) {
                         .start('cubicOut');
                 })
                 .update(function (newData, oldData) {
+                    var el = oldData.__el;
+                    el.stopAnimation();
                     // 空数据
                     if (newData.getValue() == null) {
-                        group.remove(oldData.__el);
+                        group.remove(el);
                         return;
                     }
-                    oldData.__el.animateShape()
+                    el.animateShape()
                         .when(500, newData.layout)
                         .start('cubicOut');
 
-                    newData.__el = oldData.__el;
+                    newData.__el = el;
+
+                    // Add back
+                    group.add(el);
                 })
                 .remove(function (dataItem, idx) {
                     if (dataItem.__el) {
@@ -70,7 +75,25 @@ define(function (require) {
                 })
                 .execute();
 
-            this.data = data;
+            this._data = data;
+        },
+
+        remove: function () {
+            if (this._data) {
+                var group = this.group;
+                this._data.each(function (dataItem) {
+                    var el = dataItem.__el;
+                    el.stopAnimation();
+                    el.animateShape()
+                        .when(200, {
+                            width: 0
+                        })
+                        .done(function () {
+                            group.remove(dataItem.__el);
+                        })
+                        .start('cubicOut');
+                });
+            }
         }
     });
 });
\ No newline at end of file

src/chart/scatter/ScatterView.js

@@ -48,19 +48,24 @@ define(function (require) {
                 .update(function (newData, oldData) {
                     var symbolSize = newData.getVisual('symbolSize');
                     var layout = newData.layout;
+                    var el = oldData.__el;
+                    el.stopAnimation();
                     // 空数据
                     // TODO
                     // if (newData.getValue() == null) {
                     //     group.remove(oldData.__el);
                     //     return;
                     // }
-                    oldData.__el.animate()
+                    el.animate()
                         .when(500, {
                             scale: [symbolSize, symbolSize],
                             position: [layout.x, layout.y]
                         })
                         .start('cubicOut');
-                    newData.__el = oldData.__el;
+                    newData.__el = el;
+
+                    // Add back
+                    group.add(el);
                 })
                 .remove(function (dataItem) {
                     if (dataItem.__el) {
@@ -70,6 +75,24 @@ define(function (require) {
                 .execute();
 
             this._data = data;
+        },
+
+        remove: function () {
+            if (this._data) {
+                var group = this.group;
+                this._data.each(function (dataItem) {
+                    var el = dataItem.__el;
+                    el.stopAnimation();
+                    el.animate()
+                        .when(200, {
+                            scale: [0, 0]
+                        })
+                        .done(function () {
+                            group.remove(dataItem.__el);
+                        })
+                        .start('cubicOut');
+                });
+            }
         }
     });
 });
\ No newline at end of file

src/echarts.js

@@ -194,6 +194,7 @@ define(function (require) {
 
             var chartsList = this._chartsList;
             var chartsMap = this._chartsMap;
+            var zr = this._zr;
 
             for (var i = 0; i < chartsList.length; i++) {
                 chartsList[i].__keepAlive = false;
@@ -211,6 +212,7 @@ define(function (require) {
                         chart.init(this._extensionAPI);
                         chartsMap[id] = chart;
                         chartsList.push(chart);
+                        zr.add(chart.group);
                     }
                     else {
                         // Error
@@ -224,7 +226,7 @@ define(function (require) {
             for (var i = 0; i < chartsList.length;) {
                 var chart = chartsList[i];
                 if (! chart.__keepAlive) {
-                    this._zr.remove(chart.group);
+                    zr.remove(chart.group);
                     chart.dispose();
                     chartsList.splice(i, 1);
                     delete chartsMap[chart.__id];
@@ -337,13 +339,10 @@ define(function (require) {
                 var chart = this._chartsMap[id];
                 chart.__keepAlive = true;
                 chart.render(seriesModel, ecModel, api);
-
-                this._zr.add(chart.group);
             }, this);
             // Remove groups of charts
             zrUtil.each(this._chartsList, function (chart) {
                 if (!chart.__keepAlive) {
-                    this._zr.remove(chart.group);
                     chart.remove();
                 }
             }, this);