startTranslatedBy and endTranslatedBy modify the initial and final bounds width/height

[kevinkucharczyk]

Describe the bug
startTranslatedBy and endTranslatedBy work by using the shiftedBounds function to generate a new bounds DOMRect.

Let's look at endTranslatedBy:

endTranslatedBy(dx: number, dy: number) {
  this._finalBounds = shiftedBounds(this._initialBounds!, dx, dy);
}

This takes the initial coordinates, and adds the offsets to them. However, shiftedBounds also copies width and height from the initial bounds to the final bounds. This can break an animation if a sprite's dimensions change.

To Reproduce
You can add

sprite.startTranslatedBy(0, -50);

in one of the ember-animated docs examples:

ember-animated/docs/app/pods/docs/between/detail/controller.js

Line 18 in 84a6e17

sprite.applyStyles({

and you'll see that the images lose their scale transition:

If you then also override the initial bounds sizes:

      sprite._initialBounds.height = 60;
      sprite._initialBounds.width = 60;

you'll see that the size does transition (the position animation looks buggy though because of the fact that we're changing the initial bounds entirely):

Expected behavior
startTranslatedBy and endTranslatedBy should only change the x/y coordinates, not the dimensions.