Fix race condition in animation resolution

src/plot_api/plot_api.js

@@ -2213,6 +2213,20 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
         }
     }
 
+    // Execute a callback after the wrapper function has been called n times.
+    // This is used to defer the resolution until a transition has resovled *and*
+    // the frame has completed. If it's not done this way, then we get a race
+    // condition in which the animation might resolve before a transition is complete
+    // or vice versa.
+    function callbackOnNthTime(cb, n) {
+        var cnt = 0;
+        return function() {
+            if(cb && ++cnt === n) {
+                return cb();
+            }
+        };
+    }
+
     return new Promise(function(resolve, reject) {
         function discardExistingFrames() {
             if(trans._frameQueue.length === 0) {
@@ -2264,7 +2278,7 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
                     // loop (which may exist as a result of a *different* .animate call)
                     // still resolves or rejecdts this .animate call's promise. once it's
                     // complete.
-                    nextFrame.onComplete = resolve;
+                    nextFrame.onComplete = callbackOnNthTime(resolve, 2);
                     nextFrame.onInterrupt = reject;
                 }
 
@@ -2302,7 +2316,6 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
                 // Execute the callback and unset it to ensure it doesn't
                 // accidentally get called twice
                 trans._currentFrame.onComplete();
-                trans._currentFrame.onComplete = null;
             }
 
             var newFrame = trans._currentFrame = trans._frameQueue.shift();
@@ -2322,7 +2335,12 @@ Plotly.animate = function(gd, frameOrGroupNameOrFrameList, animationOpts) {
                     helpers.coerceTraceIndices(gd, newFrame.frame.traces),
                     newFrame.frameOpts,
                     newFrame.transitionOpts
-                );
+                ).then(function() {
+                    if(newFrame.onComplete) {
+                        newFrame.onComplete();
+                    }
+
+                });
 
                 gd.emit('plotly_animatingframe', {
                     name: newFrame.name,

src/plots/plots.js

@@ -1700,6 +1700,9 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)
     var aborted = false;
 
     function executeTransitions() {
+
+        gd.emit('plotly_transitioning', []);
+
         return new Promise(function(resolve) {
             // This flag is used to disabled things like autorange:
             gd._transitioning = true;
@@ -1828,13 +1831,13 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)
 
     var seq = [plots.previousPromises, interruptPreviousTransitions, prepareTransitions, executeTransitions];
 
-
     var transitionStarting = Lib.syncOrAsync(seq, gd);
 
-    if(!transitionStarting || !transitionStarting.then) transitionStarting = Promise.resolve();
+    if(!transitionStarting || !transitionStarting.then) {
+        transitionStarting = Promise.resolve();
+    }
 
     return transitionStarting.then(function() {
-        gd.emit('plotly_transitioning', []);
         return gd;
     });
 };

test/jasmine/tests/animate_test.js

@@ -579,3 +579,88 @@ describe('Test animate API', function() {
         });
     });
 });
+
+describe('layout animation', function() {
+    'use strict';
+
+    var gd;
+    var dur = 30;
+
+    beforeEach(function(done) {
+        gd = createGraphDiv();
+        var mockCopy = Lib.extendDeep({}, mock);
+        Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
+    });
+
+    afterEach(function() {
+        Plotly.purge(gd);
+        destroyGraphDiv();
+    });
+
+    it('redraws after a layout animation', function(done) {
+        var redraws = 0;
+        gd.on('plotly_redraw', function() {redraws++;});
+
+        Plotly.animate(gd,
+            {layout: {'xaxis.range': [0, 1]}},
+            {frame: {redraw: true, duration: dur}, transition: {duration: dur}}
+        ).then(function() {
+            // Something is delayed a single tick, it seems, so the redraw
+            // isn't triggered until next tick:
+            expect(redraws).toBe(1);
+        }).catch(fail).then(done);
+    });
+
+    it('forces a relayout after layout animations', function(done) {
+        var relayouts = 0;
+        var restyles = 0;
+        var redraws = 0;
+        gd.on('plotly_relayout', function() {relayouts++;});
+        gd.on('plotly_restyle', function() {restyles++;});
+        gd.on('plotly_redraw', function() {redraws++;});
+
+        Plotly.animate(gd,
+            {layout: {'xaxis.range': [0, 1]}},
+            {frame: {redraw: false, duration: dur}, transition: {duration: dur}}
+        ).then(function() {
+            // Something is delayed a single tick, it seems, so the redraw
+            // isn't triggered until next tick:
+            expect(relayouts).toBe(1);
+            expect(restyles).toBe(0);
+            expect(redraws).toBe(0);
+        }).catch(fail).then(done);
+    });
+
+    it('triggers plotly_animated after a single layout animation', function(done) {
+        var animateds = 0;
+        gd.on('plotly_animated', function() {animateds++;});
+
+        Plotly.animate(gd, [
+            {layout: {'xaxis.range': [0, 1]}},
+        ], {frame: {redraw: false, duration: dur}, transition: {duration: dur}}
+        ).then(function() {
+            // Wait a bit just to be sure:
+            setTimeout(function() {
+                expect(animateds).toBe(1);
+                done();
+            }, dur);
+        });
+    });
+
+    it('triggers plotly_animated after a multi-step layout animation', function(done) {
+        var animateds = 0;
+        gd.on('plotly_animated', function() {animateds++;});
+
+        Plotly.animate(gd, [
+            {layout: {'xaxis.range': [0, 1]}},
+            {layout: {'xaxis.range': [2, 4]}},
+        ], {frame: {redraw: false, duration: dur}, transition: {duration: dur}}
+        ).then(function() {
+            // Wait a bit just to be sure:
+            setTimeout(function() {
+                expect(animateds).toBe(1);
+                done();
+            }, dur);
+        });
+    });
+});