[WIP] Resize

[JonForest]

A WIP PR to address #113
The issue here is that when wrapping a resize motion in an animated-if transition, the sprite either starts or ends without initialBounds/finalBounds. This PR allows the caller to provide some initial/final height/width values to act in place of calculated bounds.

I'd really appreciate and feedback on the approach here, as it to my eyes it looks a bit clunky. There might be a cleaner way to do this, so I'm definitely open to feedback.

TODO:

• Write tests
• Update docs with options (probably separate PR into gh-pages branch)

[JonForest]

I'll fix this indentation issue alongside any other comments.

[ef4]

I think this will break when one resize motion interrupts another, because of this line below:

).plus(this.prior.widthTween);

Instead of having a special case here for a missing toWidth or fromWidth, it may be easier to change _extractHeightAndWidthOpts so that if one of those is missing, it substitutes the other. So instead of returning

{
  fromWidth: 100,
  toWidth: false,
  ...
}

it would become:

  fromWidth: 100,
  toWidth: 100, // this automatically defaulted to being the same as fromWidth

This will give you a Tween that doesn't actually move, but that's what we want.

[ef4]

Thanks, this is looking good other than the comment about the interruption case.

For the tests, a good style of test to copy is

ember-animated/tests/integration/components/animated-container-test.js

Lines 411 to 432 in cd153da

	module('Integration | Component | animated container', function(hooks) {
	setupRenderingTest(hooks);
	setupAnimationTest(hooks);
	test("has visual continuity at start", async function(assert) {
	this.set('transition', function * () {});
	await this.render(hbs`
	<AnimatedContainer>
	{{#animated-if showThing use=transition duration=1000}}
	<div>Content</div>
	{{/animated-if}}
	</AnimatedContainer>
	`);
	await animationsSettled();
	let before = _bounds(this.element.querySelector('.animated-container'));
	time.pause();
	this.set('showThing', true);
	await settled();
	await time.advance(10);
	let after = _bounds(this.element.querySelector('.animated-container'));
	assert.closeSize(5, after, before);
	});

You can use the time controls to interrupt a running motion and cause it to start going back the other way, to make sure that case also works.

[JonForest]

Sorry about the massive delay in moving this on.
I've spent some time remember what I was doing, updating the resize motion with your comments and trying to write tests. The one test is hanging at the moment, not sure why.
I'll continue to investigate as time allows.

[denzo]

Just checking if this is still not possible in ember-animated