CSS3 support, replaces the normal Fx.Morph, Fx.Tween and Fx.Elements

[mcfedr]

This provides new implementations of Fx.Morph, Tween and Elements using CSS3. It replaces the normal implementation, but keeps it available and uses it when css3 is unsupported.

Related pull request mootools/mootools-core#2053

Many bugs have been fixed since that version, and advice regarding not falling back to unprefixed properties followed.

I have also added some tests to show it working.

[oskarkrawczyk]

Not a fan of the name Fx.Morph.CSS3, seems like CSS.Morph or something like that would be more suitable.

Btw. can you post some examples on JsFiddle, please?

[realityking]

I may be reading this wrong, but doesn't this still test for the unprefixed property? Please don't do that in widely uses libraries.

See this thread for more infos: https://lists.webkit.org/pipermail/webkit-dev/2011-July/017537.html

Also for the same reason the ms prefix should probably be omitted until it can be tested with a beta.

[mcfedr]

It doesnt, but looks a bit like it does because i havent properly tidied up some copied code, I have addresses this in new commit

[mcfedr]

Unfortunately its not very easy to pause a css animation where it is. Getting the css properties during the animation just returns the final values. It would be possible to get height and width via element.clientHeight/Width but this is obviously limited to these properties only. Therefore I think the best option is to just provide stop/cancel which will remove the animation properties, causing the animation to instantly complete.
pause/resume functions dont do anything when css3 is enabled.

[mcfedr]

is there any desire to merge this?
I have been using it for a few months now in production and have had no problems.
I have merged with 1.4 now with no conflicts.
if there is some agreement on changing the name i could do so, i think the current name is clear what it does and keeps it with the related classes.

[oskarkrawczyk]

I'd love to see this being pulled in. Especially considering the fact that current Fx class is pretty sluggish on Chrome (presumably a bug introduced a few versions back, and still not being resolved).

[mcfedr]

there is an example of it here

http://jsfiddle.net/mcfedr/vQWgE/

[oskarkrawczyk]

So does it work as a drop-in, and will force CSS3 transforms/transitions to Fx.Morph/Tween/Elements?

[mcfedr]

yes, if you inspect the element as it animate you will see the styles are changed.
the old versions are avaible still as Fx.Tween.CSS2 etc

[oskarkrawczyk]

This is epic. If this is not pulled into the official repo (which unfortunately might happen), I'm going to use your branch as my base -more.

[oskarkrawczyk]

/ping @arian

[oskarkrawczyk]

I think this should fall-back automatically to use JS-based animations when CSS3 aren't available. Either I'm missing something or it doesn't work like that.

[mcfedr]

@oskarkrawczyk It would have fallen back, as it checks for css3 compatibility for each animation, but i have now added if no animation is available it wont even create the Fx. ... .CSS3 classes.
It still checks before each animation because of the limited list of animatable properties.

[oskarkrawczyk]

I was trying to drop-in your class, and unfortunately I'm getting a Uncaught TypeError: Object #<Object> has no method 'getStyles' on this line this.preTransStyles = this.element.getStyles(Fx.CSS3.features.transitionProperty,.

Still trying to pinpoint what's the exact issue.