Transition to/from width:auto and height:auto properly

[NV]

Only tested in Chrome 29, Safari 6.0.5 and Firefox 21.0 so far.

[NV]

Rationale: CSS transition from/to auto values.

[rstacruz]

Whoa, interesting. This means Transit can also replace .slideUp() / .slideDown(), yes? 👍

[rstacruz]

If anyone can help review this, please post your feedback here.

[NV]

It should be feasible to implementing .slideUp() / .slideDown() using this technique. Although. I haven’t actually tried.

[benguild]

I noticed this as well. If you animate to an "auto" width/height it goes to 0 and then finally sets to that value.

Workaround is to (for example) ... on a DIV:

$('#somediv').transition( { 'height': $('#somediv')[0].scrollHeight+'px' }, 300, function () {
  $('#somediv').css( { 'height': 'auto' } );
} );

[NV]

Still relevant, I just rebased from the upstream.

@benguild this pull-request does it without the workaround.

[sdhull]

💯 👍

I have no idea why this works but I can verify that it does indeed work. Check out the jsFiddle

Please merge this! Can't wait to replace slideUp() and slideDown() 😁

[sdhull]

PS I briefly tried to redefine slideUp and slideDown, however was stymied when it came to properly dealing with padding and margin. Any tips my friends?

[sdhull]

@NV I think your branch breaks the fx queue for opacity animations (somehow, not sure how).

Here's a js fiddle, try out the opacity transition. I've found (bizarrely) that double-clicking it seems to make it transitions work (kinda).

Here's the same fiddle but with current master. Notice the difference in the opacity transition.

Since I have no idea how your patch works, I'm at a loss as to how I might fix it.

[mu3]

Still not merged? wah 😒