Allow set() to apply "auto"

[weotch]

Here's some example code:

    var w = this.$el.width(); // IE9 wouldn't let me set width to 100%
    this.$hr.tram()
        .add('width 200ms ease-out')
        .wait(1000)
        .then(function() { 
            this.start({ opacity:1, width: w }).then(function() {

                // Set the width to auto so it's responsive
                this.set({width: 'auto'});
            });
        })
    ;

this.set({width: 'auto'}); is causing:

Type warning: Expected: [number(px) or string(unit or %)] Got: [string] auto tram.js:1450

But I think that this is a valid use for set. Thoughts?

[danro]

Hmm interesting. As a workaround you could just do this.$el.css('width', 'auto');

[weotch]

Doesn't tram have a method for removing itself? The problem with your suggestion is css3 tries to tween from w to auto. So I wanna remove the css3 transition stuff.

[danro]

Ah crap, good point. For now, maybe live with the type warning and perhaps we can loosen up the set() a bit.

[FossPrime]

Ran into this exact same problem. I have some matrix code that unintendedly gets animated because the transition is still applied. I was looking for a callback or promises to use set(), though my first thought was remove(), as a counter to add();

myTram.style.webkitTransitionProperty = "none";

Doing this every time I do manual animations is too expensive, making this a critical bug.

[danro]

@Reyncor tram does have a way to clear out the transition property. Simply call stop() when you'd like tram to remove it:

tram(el).start({ x: 200 }).then(function() {
  this.stop();
});

Should add a shortcut for this too: e.g. thenStop and thenHide would be nice.

[danro]

@weotch Just added support for width and height auto values... including animation :)

You can see an example here: http://bkwld.github.io/tram/examples/to-from-auto.html