Migrate to CSS3 Transitions

[jdan]

The effect lags quite heavily on iOS devices, and I'm not sure why. Maybe we should think about CSS3 transition for some cases, since hardware acceleration is applied to CSS3 on iOS.

CSS3 transitions also have other benefits, namely simplicity.

[xtagon]

I've started work on this but ran into a snag. The text transitions out, but is not replaced because the transitionend event is seemingly not firing. Could you take a look? 357c529

Once it is working, it should fall back to the JQuery slide when no transitionOut option is specified.

[jdan]

Thanks for taking a stab at this, I like the way you engineered this.

The first thing I found was that giving class="dynamo" AND calling .dynamo() results in issues. I don't think that's causing your problems, but just a heads up (I should probably fix this behavior)

Doing the following:

el.bind('webkitAnimationEnd', function() {
    console.log('transition ended');
}); // FIXME

Produces console output. I'm not sure why webkitTransitionEnd fails, but I know that webkitAnimationEnd works. This might not fix your problem, though. I don't know much about CSS3 transitions and their events. Throwing onDone there transitions, but the behavior is wonky.

[xtagon]

You're right, I should have been using animationend instead of transitionend! I was also forgetting to remove the animation classes after it completed. My branch has been updated accordingly.

There is another quirk: the fadeOutUp animation doesn't look right because of how the element is nested in it's parent. The animation should look like the element fading up and out, but it is is clipped by the parent's border. So it's more like a fading slide now. I'm not sure how to go about fixing that, but we should test other animate.css classes as well.