Fix animation on chart initialization

src/axis.js

@@ -288,17 +288,18 @@ c3_chart_internal_fn.updateAxisLabels = function (withTransition) {
     var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel),
         axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel),
         axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label);
-    (withTransition ? axisXLabel.transition() : axisXLabel)
+    var duration = $$.config.transition_duration;
+    (withTransition ? axisXLabel.transition().duration(duration) : axisXLabel)
         .attr("x", $$.xForXAxisLabel.bind($$))
         .attr("dx", $$.dxForXAxisLabel.bind($$))
         .attr("dy", $$.dyForXAxisLabel.bind($$))
         .text($$.textForXAxisLabel.bind($$));
-    (withTransition ? axisYLabel.transition() : axisYLabel)
+    (withTransition ? axisYLabel.transition().duration(duration) : axisYLabel)
         .attr("x", $$.xForYAxisLabel.bind($$))
         .attr("dx", $$.dxForYAxisLabel.bind($$))
         .attr("dy", $$.dyForYAxisLabel.bind($$))
         .text($$.textForYAxisLabel.bind($$));
-    (withTransition ? axisY2Label.transition() : axisY2Label)
+    (withTransition ? axisY2Label.transition().duration(duration) : axisY2Label)
         .attr("x", $$.xForY2AxisLabel.bind($$))
         .attr("dx", $$.dxForY2AxisLabel.bind($$))
         .attr("dy", $$.dyForY2AxisLabel.bind($$))

src/core.js

@@ -553,7 +553,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
         .attr("x", $$.width / 2)
         .attr("y", $$.height / 2)
         .text(config.data_empty_label_text)
-      .transition()
+        .transition().duration(duration)
         .style('opacity', targetsToShow.length ? 0 : 1);
 
     // grid
@@ -673,14 +673,16 @@ c3_chart_internal_fn.updateAndRedraw = function (options) {
     var $$ = this, config = $$.config, transitions;
     options = options || {};
     // same with redraw
-    options.withTransition = getOption(options, "withTransition", true);
+    options.withTransition = config.transition_duration ? getOption(options, "withTransition", true) : false;
     options.withTransform = getOption(options, "withTransform", false);
     options.withLegend = getOption(options, "withLegend", false);
     // NOT same with redraw
     options.withUpdateXDomain = true;
     options.withUpdateOrgXDomain = true;
     options.withTransitionForExit = false;
-    options.withTransitionForTransform = getOption(options, "withTransitionForTransform", options.withTransition);
+    options.withTransitionForTransform = config.transition_duration ? 
+                                         getOption(options, "withTransitionForTransform", options.withTransition) : 
+                                         false;
     // MEMO: this needs to be called before updateLegend and it means this ALWAYS needs to be called)
     $$.updateSizes();
     // MEMO: called in updateLegend in redraw if withLegend
@@ -785,26 +787,30 @@ c3_chart_internal_fn.subxx = function (d) {
 
 c3_chart_internal_fn.transformMain = function (withTransition, transitions) {
     var $$ = this,
-        xAxis, yAxis, y2Axis;
+        xAxis, yAxis, y2Axis,
+        duration = $$.config.transition_duration;
+
+    withTransition = withTransition && duration;
     if (transitions && transitions.axisX) {
         xAxis = transitions.axisX;
     } else {
         xAxis  = $$.main.select('.' + CLASS.axisX);
-        if (withTransition) { xAxis = xAxis.transition(); }
+        xAxis  = $$.main.select('.' + CLASS.axisX);
+        if (withTransition) { xAxis = xAxis.transition().duration(duration); }
     }
     if (transitions && transitions.axisY) {
         yAxis = transitions.axisY;
     } else {
         yAxis = $$.main.select('.' + CLASS.axisY);
-        if (withTransition) { yAxis = yAxis.transition(); }
+        if (withTransition) { yAxis = yAxis.transition().duration(duration); }
     }
     if (transitions && transitions.axisY2) {
         y2Axis = transitions.axisY2;
     } else {
         y2Axis = $$.main.select('.' + CLASS.axisY2);
-        if (withTransition) { y2Axis = y2Axis.transition(); }
+        if (withTransition) { y2Axis = y2Axis.transition().duration(duration); }
     }
-    (withTransition ? $$.main.transition() : $$.main).attr("transform", $$.getTranslate('main'));
+    (withTransition ? $$.main.transition().duration(duration) : $$.main).attr("transform", $$.getTranslate('main'));
     xAxis.attr("transform", $$.getTranslate('x'));
     yAxis.attr("transform", $$.getTranslate('y'));
     y2Axis.attr("transform", $$.getTranslate('y2'));

src/legend.js

@@ -30,8 +30,15 @@ c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth)
     };
 };
 c3_chart_internal_fn.transformLegend = function (withTransition) {
-    var $$ = this;
-    (withTransition ? $$.legend.transition() : $$.legend).attr("transform", $$.getTranslate('legend'));
+    var $$ = this,
+        legend = $$.legend,
+        duration = $$.config.transition_duration;
+
+    // Turn off transitions if duration was not specified in config
+    if(withTransition && duration){
+        legend = legend.transition().duration(duration);
+    }
+    legend.attr("transform", $$.getTranslate('legend'));
 };
 c3_chart_internal_fn.updateLegendStep = function (step) {
     this.legendStep = step;