search

jdan / dynamo.js

Cycles through bits of text in place
http://jdan.github.io/dynamo.js/
MIT License
625 stars 65 forks source link

Migrate to CSS3 Transitions #9

Open jdan opened 12 years ago

jdan commented 12 years ago

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 commented 11 years ago

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? 357c5297eb206ad0b3222e7cb4ce521008681630

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

jdan commented 11 years ago

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 commented 11 years ago

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.