Fall back to disallowing simultaneous data + axis transitions

Author: rreusser

src/plot_api/plot_api.js

@@ -2617,22 +2617,22 @@ Plotly.transition = function(gd, data, layout, traceIndices, transitionConfig) {
 
     function executeCallbacks(list) {
         var p = Promise.resolve();
-        if (!list) return p;
+        if(!list) return p;
         while(list.length) {
             p = p.then((list.shift()));
         }
         return p;
     }
 
     function flushCallbacks(list) {
-        if (!list) return;
+        if(!list) return;
         while(list.length) {
             list.shift();
         }
     }
 
-    var restyleList = [];
     function executeTransitions() {
+        var traceTransitionConfig;
         var hasTraceTransition = false;
         var j;
         var basePlotModules = fullLayout._basePlotModules;
@@ -2654,6 +2654,17 @@ Plotly.transition = function(gd, data, layout, traceIndices, transitionConfig) {
             }
         }
 
+        if(hasAxisTransition) {
+            traceTransitionConfig = Lib.extendFlat({}, transitionConfig);
+            traceTransitionConfig.duration = 0;
+        } else {
+            traceTransitionConfig = transitionConfig;
+        }
+
+        for(j = 0; j < basePlotModules.length; j++) {
+            basePlotModules[j].plot(gd, transitionedTraces, traceTransitionConfig);
+        }
+
         gd._transitionData._completionTimeout = setTimeout(completeTransition, transitionConfig.duration);
 
         if(!hasAxisTransition && !hasTraceTransition) {
@@ -2670,7 +2681,7 @@ Plotly.transition = function(gd, data, layout, traceIndices, transitionConfig) {
     }
 
     function interruptPreviousTransitions() {
-        if (gd._transitionData._completionTimeout) {
+        if(gd._transitionData._completionTimeout) {
             // Prevent the previous completion from occurring:
             clearTimeout(gd._transitionData._completionTimeout);
             gd._transitionData._completionTimeout = null;

src/plots/cartesian/transition_axes.js

@@ -239,7 +239,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionConfig) {
             axi.range = to.slice();
         }
 
-        return Plotly.relayout(gd, attrs).then(function () {
+        return Plotly.relayout(gd, attrs).then(function() {
             for(var i = 0; i < affectedSubplots.length; i++) {
                 unsetSubplotTransform(affectedSubplots[i]);
             }
@@ -264,6 +264,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionConfig) {
         });
     }
 
+    var t1, t2, raf;
     var easeFn = d3.ease(transitionConfig.ease);
 
     gd._transitionData._interruptCallbacks.push(function() {
@@ -272,14 +273,12 @@ module.exports = function transitionAxes(gd, newLayout, transitionConfig) {
         return transitionTail();
     });
 
-    gd._transitionData._cleanupCallbacks.push(function () {
+    gd._transitionData._cleanupCallbacks.push(function() {
         cancelAnimationFrame(raf);
         raf = null;
         return transitionComplete();
     });
 
-    var t1, t2, raf;
-
     function doFrame() {
         t2 = Date.now();
 

test/image/baselines/animation.png

@@ -1,5 +1,4 @@
 var Plotly = require('@lib/index');
-var PlotlyInternal = require('@src/plotly');
 var Lib = require('@src/lib');
 
 var createGraphDiv = require('../assets/create_graph_div');
@@ -37,7 +36,7 @@ describe('Transition API', function() {
     it('emits plotly_begintransition on transition start', function(done) {
         var beginTransitionCnt = 0;
 
-        gd.on('plotly_begintransition', function () {
+        gd.on('plotly_begintransition', function() {
             beginTransitionCnt++;
         });