Permalink
Browse files

Made clearer not supporting unprefixed properties

Removed some animatable properties from this list
Remove animation css afterwards
A bit of refactoring
  • Loading branch information...
1 parent 445a47b commit 02c602d786ec5db7ba14ee4cc990d344c0c0be18 @mcfedr committed Sep 10, 2011
Showing with 112 additions and 107 deletions.
  1. +62 −12 Source/Fx/Fx.CSS3.js
  2. +9 −69 Source/Fx/Fx.Morph.CSS3.js
  3. +4 −26 Source/Fx/Fx.Tween.CSS3.js
  4. +37 −0 Source/Types/Object.Extras.js
View
@@ -23,18 +23,17 @@ provides: [Fx.CSS3Funcs]
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;
+ if (typeof style[prefix + 'Transition'] != 'undefined') return prefix;
}
return false;
})();
if(prefix) {
- var t = prefix ? prefix + 'T' : 't';
return {
- transition: t + 'ransition',
- transitionProperty: t + 'ransitionProperty',
- transitionDuration: t + 'ransitionDuration',
- transitionTimingFunction : t + 'ransitionTimingFunction',
+ transition: prefix + 'Transition',
+ transitionProperty: prefix + 'TransitionProperty',
+ transitionDuration: prefix + 'TransitionDuration',
+ transitionTimingFunction : prefix + 'TransitionTimingFunction',
transitionend: (prefix == 'ms' || prefix == 'Moz') ? 'transitionEnd' : prefix + 'TransitionEnd'
}
}
@@ -86,14 +85,21 @@ provides: [Fx.CSS3Funcs]
'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',
+ var animatable = ['background-color', 'border-bottom-width', 'border-left-width', 'border-right-width',
+ 'border-spacing', 'border-top-width', 'border-width', 'bottom', 'color', 'font-size', 'font-weight',
+ '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'];
+ 'outline-width', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'right', 'text-indent',
+ 'top', 'vertical-align', 'visibility', 'width', 'word-spacing', 'z-index'];
+ /*
+ This is a list of properties listed by w3c but that are currently largely unsupported
+ http://www.w3.org/TR/css3-transitions/#animatable-properties-
+ http://www.opera.com/docs/specs/presto29/css/transitions/
+
+ var unsupported = ['background-image', 'background-position', 'border-bottom-color', 'border-color', 'border-left-color',
+ 'border-right-color', 'border-top-color', 'crop', 'grid-*', 'text-shadow', 'zoom']
+ */
Fx.CSS3Funcs = {
initialize: function(element, options){
@@ -105,6 +111,50 @@ provides: [Fx.CSS3Funcs]
}
this.parent(element, options);
},
+
+ startCSS3: function(properties, from, to, complete) {
+ if(this.boundComplete) return this;
+
+ if(!Object.isEqual(from, to)) {
+ var preTransStyles = this.element.getStyles(Fx.CSS3Funcs.css3Features.transitionProperty,
+ Fx.CSS3Funcs.css3Features.transitionDuration,
+ Fx.CSS3Funcs.css3Features.transitionTimingFunction);
+
+ complete = complete || function() { return true; };
+
+ this.boundComplete = function(e) {
+ if(complete(e)) {
+ this.element.removeEvent(Fx.CSS3Funcs.css3Features.transitionend, this.boundComplete);
+ this.element.setStyles(preTransStyles);
+ this.boundComplete = null;
+ this.fireEvent('complete', this);
+ }
+ }.bind(this);
+
+ this.element.addEvent(Fx.CSS3Funcs.css3Features.transitionend, this.boundComplete);
+
+ var trans = function(){
+ var transStyles = {};
+ transStyles[Fx.CSS3Funcs.css3Features.transitionProperty] =
+ properties.reduce(function(a, b) { return a + ', ' + b; });
+ transStyles[Fx.CSS3Funcs.css3Features.transitionDuration] = this.options.duration + 'ms';
+ transStyles[Fx.CSS3Funcs.css3Features.transitionTimingFunction] =
+ 'cubic-bezier(' + Fx.CSS3Funcs.transitionTimings[this.options.transition] + ')';
+ this.element.setStyles(transStyles);
+ this.set(this.compute(from, to, 1));
+ }.bind(this);
+
+ this.element.setStyle(Fx.CSS3Funcs.css3Features.transitionProperty, 'none');
+ this.set(this.compute(from, to, 0));
+ trans.delay(0.1);
+ this.fireEvent('start', this);
+ }
+ else {
+ this.fireEvent('start', this);
+ this.fireEvent('complete', this);
+ }
+ return this;
+ },
cancel: function(){
if (this.css3Supported){
View
@@ -8,7 +8,7 @@ copyright: Copyright (c) 2010, Dipl.-Ing. (FH) André Fiedler <kontakt at visual
copyright: Copyright (c) 2011 Fred Cox mcfedr@gmail.com
authors: [Fred Cox, André Fiedler, eskimoblood]
-requires: [Fx.CSS3Funcs, Core/Fx.Morph]
+requires: [Fx.CSS3Funcs, Object.Extras, Core/Fx.Morph]
provides: [Fx.Morph.CSS3]
...
@@ -17,43 +17,6 @@ provides: [Fx.Morph.CSS3]
var morphCSS2 = Fx.Morph;
- function isEqual(a, b) {
- // Check object identity.
- if (a === b) return true;
- // Different types?
- var atype = typeOf(a), btype = typeOf(b);
- if (atype != btype) return false;
- // Basic equality test (watch out for coercions).
- if (a == b) return true;
- // One is falsy and the other truthy.
- if ((!a && b) || (a && !b)) return false;
- // One of them implements an isEqual()?
- if (a.isEqual) return a.isEqual(b);
- if (b.isEqual) return b.isEqual(a);
- // Both are NaN?
- if ((a !== a) && (b !== b)) return false;
- // Check dates' integer values.
- if (atype == 'date') return a.getTime() === b.getTime();
- if (atype == 'function') return true;
- // Compare regular expressions.
- if (atype == 'regexp')
- return a.source === b.source &&
- a.global === b.global &&
- a.ignoreCase === b.ignoreCase &&
- a.multiline === b.multiline;
- // If a is not an object by this point, we can't handle it.
- if (atype !== 'object' && atype !== 'array') return false;
- // Check for different array lengths before comparing contents.
- if (a.length && (a.length !== b.length)) return false;
- // Nothing else worked, deep compare the contents.
- var aKeys = Object.keys(a), bKeys = Object.keys(b);
- // Different object sizes?
- if (aKeys.length != bKeys.length) return false;
- // Recursive comparison of contents.
- for (var key in a) if (!(key in b) || !isEqual(a[key], b[key])) return false;
- return true;
- }
-
Fx.Morph = new Class({
Extends: morphCSS2,
@@ -64,45 +27,22 @@ provides: [Fx.Morph.CSS3]
start: function(properties){
if ((this.css3Supported = this.checkCSS3(properties))) {
- if(this.boundComplete) return this;
if (typeof properties == 'string') properties = this.search(properties);
var from = {}, to = {};
for (var p in properties){
var parsed = this.prepare(this.element, p, properties[p]);
from[p] = parsed.from;
to[p] = parsed.to;
}
- if(!isEqual(from, to)) {
- var incomplete = Object.map(properties, function() { return false; });
- this.boundComplete = function(event){
- incomplete[event.getPropertyName()] = true;
- if(Object.every(incomplete, function(v) { return v; })) {
- this.element.removeEvent(Fx.CSS3Funcs.css3Features.transitionend, this.boundComplete);
- this.boundComplete = null;
- this.fireEvent('complete', this);
- }
- }.bind(this);
-
- this.element.addEvent(Fx.CSS3Funcs.css3Features.transitionend, this.boundComplete);
- var trans = function(){
- var transStyles = {};
- transStyles[Fx.CSS3Funcs.css3Features.transitionProperty] = Object.keys(properties).reduce(function(a, b) { return a + ', ' + b; });
- transStyles[Fx.CSS3Funcs.css3Features.transitionDuration] = this.options.duration + 'ms';
- transStyles[Fx.CSS3Funcs.css3Features.transitionTimingFunction] = 'cubic-bezier(' + Fx.CSS3Funcs.transitionTimings[this.options.transition] + ')';
- this.element.setStyles(transStyles);
- this.set(this.compute(from, to, 1));
- }.bind(this);
- this.element.setStyle(Fx.CSS3Funcs.css3Features.transitionProperty, 'none');
- this.set(this.compute(from, to, 0));
- trans.delay(0.1);
- this.fireEvent('start', this);
- }
- else {
- this.fireEvent('start', this);
- this.fireEvent('complete', this);
- }
- return this;
+ var incomplete = Object.map(properties, function() { return false; });
+
+ var complete = function(event){
+ incomplete[event.getPropertyName()] = true;
+ return Object.every(incomplete, function(v) { return v; });
+ };
+
+ return this.startCSS3(Object.keys(properties), from, to, complete);
}
return this.parent(properties);
}
View
@@ -26,33 +26,11 @@ provides: [Fx.Tween.CSS3]
},
start: function(property, from, to){
- if ((this.css3Supported = this.checkCSS3(property))) {
- if(this.boundComplete) return this;
- var args = Array.flatten(arguments);
- this.property = this.options.property || args.shift();
+ var args = Array.flatten(arguments);
+ this.property = this.options.property || args.shift();
+ if ((this.css3Supported = this.checkCSS3(this.property))) {
var parsed = this.prepare(this.element, this.property, args);
- this.from = parsed.from;
- this.to = parsed.to;
- this.boundComplete = function(event){
- if (event.getPropertyName() == this.property){
- this.element.removeEvent(Fx.CSS3Funcs.css3Features.transitionend, this.boundComplete);
- this.boundComplete = null;
- this.fireEvent('complete', this);
- }
- }.bind(this);
- this.element.addEvent(Fx.CSS3Funcs.css3Features.transitionend, this.boundComplete);
- var trans = function(){
- this.element.setStyle(Fx.CSS3Funcs.css3Features.transition, this.property + ' ' + this.options.duration + 'ms cubic-bezier(' + Fx.CSS3Funcs.transitionTimings[this.options.transition] + ')');
- this.set(this.compute(parsed.from, parsed.to, 1));
- }.bind(this);
- if (args[1]){
- this.element.setStyle(Fx.CSS3Funcs.css3Features.transition, 'none');
- this.set(this.compute(parsed.from, parsed.to, 0));
- trans.delay(0.1);
- } else
- trans();
- this.fireEvent('start', this);
- return this;
+ return this.startCSS3([this.property], parsed.from, parsed.to);
}
return this.parent(property, from, to);
}
@@ -59,6 +59,43 @@ Object.extend({
object[key].apply(object, args);
}
return object;
+ },
+
+ isEqual: function(a, b){
+ // Check object identity.
+ if (a === b) return true;
+ // Different types?
+ var atype = typeOf(a), btype = typeOf(b);
+ if (atype != btype) return false;
+ // Basic equality test (watch out for coercions).
+ if (a == b) return true;
+ // One is falsy and the other truthy.
+ if ((!a && b) || (a && !b)) return false;
+ // One of them implements an isEqual()?
+ if (a.isEqual) return a.isEqual(b);
+ if (b.isEqual) return b.isEqual(a);
+ // Both are NaN?
+ if ((a !== a) && (b !== b)) return false;
+ // Check dates' integer values.
+ if (atype == 'date') return a.getTime() === b.getTime();
+ if (atype == 'function') return true;
+ // Compare regular expressions.
+ if (atype == 'regexp')
+ return a.source === b.source &&
+ a.global === b.global &&
+ a.ignoreCase === b.ignoreCase &&
+ a.multiline === b.multiline;
+ // If a is not an object by this point, we can't handle it.
+ if (atype !== 'object' && atype !== 'array') return false;
+ // Check for different array lengths before comparing contents.
+ if (a.length && (a.length !== b.length)) return false;
+ // Nothing else worked, deep compare the contents.
+ var aKeys = Object.keys(a), bKeys = Object.keys(b);
+ // Different object sizes?
+ if (aKeys.length != bKeys.length) return false;
+ // Recursive comparison of contents.
+ for (var key in a) if (!(key in b) || !Object.isEqual(a[key], b[key])) return false;
+ return true;
}
});

0 comments on commit 02c602d

Please sign in to comment.