Rework macros to be used as static tram properties.

[danro]

Macros should be reworked a bit.

Instead of strings, I think they'd be more useful like this:

tram(element)
  .start({ x: 200, opacity: 0 })
  .then(tram.hide);

or

tram(element)
  .start(tram.slideDown)
  .then(tram.slideUp)
  .then(function () { console.log('done') });

[danro]

@weotch check out the above spec ^ .. does that work for your auto-hide request?

tram also now has a show() shortcut as well. so you can do this:

tram(element).show().start({ etc })

[weotch]

In your show() example, will it defer the start so you still see the animation? Rather than that annoying css3 thing where if you toggle display:none on the same tick as a transition it doesn't show?

[danro]

@weotch of course, man ;) every start() is actually deferred a single animation frame.

hide() is also smart in that it stops the tram before setting display: none.

[danro]

Here's a test showing how tram works with display: none. http://bkwld.github.io/tram/test/display-none.html

[weotch]

Was thinking of finally making some macros. Is the API for them gonna change you think?

[danro]

@weotch currently there are no macros... we'd need to define how that works.

[weotch]

[danro]

Exactly. I do like the idea of the thenHide helper method.

[weotch]

Regarding defining how it works, what about an API like:

// Define it.  `tram` is the AMD module
tram.macro('fadeOut', function() { this.add('opacity 300ms').start({opacity:0}).then(function() { this.hide(); }); });

// Use it
$el.tram().macro('fadeOut');

Note: I edited this

[danro]

Been thinking more about macros, and I don't think we need to write any code to support them. Tram already supports passing functions to the start() method. Here's an example of a "fadeOut macro" with a customizable time value:

tram(el, fadeOut(800));

function fadeOut(time) {
  if (time == null) time = 500;
  return function () {
    this
    .add('opacity ' + time)
    .start({ opacity: 0 })
    .then(function () {
      this.hide();
    });
  };
}

Working jsbin example here.