Layout animations for container array'd objects

src/plots/plots.js

@@ -1418,6 +1418,8 @@ plots.extendObjectWithContainers = function(dest, src, containerPaths) {
             for(j = 0; j < srcContainer.length; j++) {
                 destContainer[j] = plots.extendObjectWithContainers(destContainer[j], srcContainer[j]);
             }
+
+            destProp.set(destContainer);
         }
     }
 
@@ -1510,7 +1512,7 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)
             delete layoutUpdate[attr].range;
         }
 
-        Lib.extendDeepNoArrays(gd.layout, layoutUpdate);
+        plots.extendLayout(gd.layout, layoutUpdate);
 
         // Supply defaults after applying the incoming properties. Note that any attempt
         // to simplify this step and reduce the amount of work resulted in the reconstruction
@@ -1556,10 +1558,25 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)
                 gd._transitioningWithDuration = true;
             }
 
+
+            // If another transition is triggered, this callback will be executed simply because it's
+            // in the interruptCallbacks queue. If this transition completes, it will instead flush
+            // that queue and forget about this callback.
             gd._transitionData._interruptCallbacks.push(function() {
                 aborted = true;
             });
 
+            if(frameOpts.redraw) {
+                gd._transitionData._interruptCallbacks.push(function() {
+                    return Plotly.redraw(gd);
+                });
+            }
+
+            // Emit this and make sure it happens last:
+            gd._transitionData._interruptCallbacks.push(function() {
+                gd.emit('plotly_transitioninterrupted', []);
+            });
+
             // Construct callbacks that are executed on transition end. This ensures the d3 transitions
             // are *complete* before anything else is done.
             var numCallbacks = 0;
@@ -1631,14 +1648,11 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)
     }
 
     function interruptPreviousTransitions() {
-        gd.emit('plotly_transitioninterrupted', []);
-
         // If a transition is interrupted, set this to false. At the moment, the only thing that would
         // interrupt a transition is another transition, so that it will momentarily be set to true
         // again, but this determines whether autorange or dragbox work, so it's for the sake of
         // cleanliness:
         gd._transitioning = false;
-        gd._transtionWithDuration = false;
 
         return executeCallbacks(gd._transitionData._interruptCallbacks);
     }

test/jasmine/tests/transition_test.js

@@ -65,6 +65,34 @@ function runTests(transitionDuration) {
                 }).catch(fail).then(done);
         });
 
+        it('transitions an annotation', function(done) {
+            function annotationPosition() {
+                var g = gd._fullLayout._infolayer.select('.annotation').select('.annotation-text-g');
+                return [parseInt(g.attr('x')), parseInt(g.attr('y'))];
+            }
+            var p1, p2;
+
+            Plotly.relayout(gd, {annotations: [{x: 0, y: 0, text: 'test'}]}).then(function() {
+                p1 = annotationPosition();
+
+                return Plots.transition(gd, null, {
+                    'annotations[0].x': 1,
+                    'annotations[0].y': 1
+                }, [],
+                    {redraw: true, duration: transitionDuration},
+                    {duration: transitionDuration, easing: 'cubic-in-out'}
+                );
+            }).then(function() {
+                p2 = annotationPosition();
+
+                // Ensure both coordinates have moved, i.e. that the annotation has transitioned:
+                expect(p1[0]).not.toEqual(p2[0]);
+                expect(p1[1]).not.toEqual(p2[1]);
+
+            }).catch(fail).then(done);
+
+        });
+
         it('transitions a transform', function(done) {
             Plotly.restyle(gd, {
                 'transforms[0]': {