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

Closed
wants to merge 15 commits into
from

Projects

None yet

3 participants

@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.

@mcfedr mcfedr CSS3 support, replaces the normal Fx.Morph, Fx.Tween and Fx.Elements
Add CSS3 transition support in place of Fx.Elements

Fix missing variable

Trying again

Problems

Problem

Working

CSS3 functions moved from core

Fixes and a test for tween

Fixes and tests for the rest
445a47b
@mcfedr

There is a possibility of refactoring this into Object, I think it could be a useful function to have there

@mcfedr

So you can see it being used more widely

@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 realityking and 1 other commented on an outdated diff Sep 10, 2011
Source/Fx/Fx.CSS3.js
+requires: [Core/Class.Extras, Core/Element.Event, Core/Element.Style, Core/Fx, Array.Extras]
+
+provides: [Fx.CSS3Funcs]
+...
+*/
+
+(function() {
+
+ var css3Features = (function(){
+
+ var prefix = (function(){
+ var prefixes = ['ms', 'O', 'Moz', 'webkit'],
+ style = document.documentElement.style;
+ for (var l = prefixes.length; l--;){
+ var prefix = prefixes[l];
+ if (typeof style[(prefix ? prefix + 'T' : 't') + 'ransition'] != 'undefined') return prefix;
@realityking
realityking Sep 10, 2011

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
mcfedr Sep 10, 2011

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

@realityking realityking and 1 other commented on an outdated diff Sep 10, 2011
Source/Fx/Fx.CSS3.js
+ 'quart:in' : '0.69,0,0.76,0.17',
+ 'quart:out' : '0.26,0.96,0.44,1',
+ 'quart:in:out' : '0.76,0,0.24,1',
+ 'quint:in' : '0.64,0,0.78,0',
+ 'quint:out' : '0.22,1,0.35,1',
+ 'quint:in:out' : '0.9,0,0.1,1'
+ };
+
+ var animatable = ['background-color', 'background-image', 'background-position', 'border-bottom-color', 'border-bottom-width',
+ 'border-color', 'border-left-color', 'border-left-width', 'border-right-color', 'border-right-width', 'border-spacing',
+ 'border-top-color', 'border-top-width', 'border-width', 'bottom', 'color', 'crop', 'font-size', 'font-weight',
+ 'grid-*', 'height', 'left', 'letter-spacing', 'line-height', 'margin-bottom', 'margin-left', 'margin-right',
+ 'margin-top', 'max-height', 'max-width', 'min-height', 'min-width', 'opacity', 'outline-color', 'outline-offset',
+ 'outline-width', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'right', 'text-indent', 'text-shadow',
+ 'top', 'vertical-align', 'visibility', 'width', 'word-spacing', 'z-index', 'zoom'];
+
@realityking
realityking Sep 10, 2011

I only looked at the list for Presto 2.9 (http://www.opera.com/docs/specs/presto29/css/transitions/) but the following properties you listed can't be transitioned by Presto:

background-image, background-position, border-bottom-color, border-color, border-left-color, border-right-color, border-top-color, crop, grid-* (that isn't even a property, is it?), text-shadow, zoom

I'm sure other browsers have trouble as well. On the other hand AFAIK all browsers supporting CSS Transitions can transition CSS Transforms.

@mcfedr
mcfedr Sep 10, 2011

I had taken this list from w3c, but have updated it to not include these that you listed.

mcfedr added some commits Sep 10, 2011
@mcfedr mcfedr Made clearer not supporting unprefixed properties
Removed some animatable properties from this list
Remove animation css afterwards
A bit of refactoring
02c602d
@mcfedr mcfedr problems 5ff369f
@mcfedr mcfedr stop/cancel work, and chaining function are properly called 4067da1
@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

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.

@mcfedr mcfedr closed this Mar 2, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment