From cd673d1aebfc3a244422253840cb97f46a6a7aaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=ADn=20Ciparelli?= Date: Sat, 22 Oct 2011 23:21:38 -0300 Subject: [PATCH 1/2] added transform to transition-property, or it wouldnt apply transition unless there isn't another property transitioning. Removed setVendorProperty method in favor of a 'getSupportedProperty' util to avoid applying unsupported properties. --- .gitignore | 2 ++ .npmignore | 2 ++ move.js | 92 ++++++++++++++++++++++++++++++++---------------------- 3 files changed, 59 insertions(+), 37 deletions(-) diff --git a/.gitignore b/.gitignore index e0c8856..34e1bd4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ .DS_Store node_modules *.sock +*.sublime-project +*.sublime-workspace \ No newline at end of file diff --git a/.npmignore b/.npmignore index f1250e5..1fd4b57 100644 --- a/.npmignore +++ b/.npmignore @@ -2,3 +2,5 @@ support test examples *.sock +*.sublime-project +*.sublime-workspace diff --git a/move.js b/move.js index baec8dd..b447ede 100644 --- a/move.js +++ b/move.js @@ -66,6 +66,30 @@ duration: 500 }; + move.utils = {}; + + /** + * Get browser supported property given a CSS `prop`. + * + * @param {String} prop + * @return {String} + * @api public + */ + + move.utils.getSupportedProperty = function(prop){ + var vendorProp, bodyStyle = document.body.style, capProp = prop.charAt(0).toUpperCase().replace(/-(\w)/g,RegExp.$1.toUpperCase()) + prop.slice(1), prefixes = [ "Moz", "Webkit", "O", "ms" ]; + if (prop in bodyStyle) { + return prop; + }else{ + for (var i = prefixes.length - 1; i >= 0; i--) { + vendorProp = prefixes[i] + capProp; + if (vendorProp in bodyStyle){ + return '-' + prefixes[i].toLowerCase() + '-' + prop; + } + } + } + }; + /** * Easing functions. */ @@ -332,11 +356,9 @@ Move.prototype.ease = function(fn){ fn = move.ease[fn] || fn || 'ease'; - return this.setVendorProperty('transition-timing-function', fn); + return this.setProperty('transition-timing-function', fn); }; - - /** * Set animation properties * @@ -346,15 +368,13 @@ * @api public */ - Move.prototype.animate = function(name, props){ - if (typeof props !== 'undefined'){ - for (var i in props){ - if (props.hasOwnProperty(i)){ - this.setVendorProperty('animation-'+i, props[i]) - } + Move.prototype.animate = function(name, keyframe, props){ + for (var i in props){ + if (props.hasOwnProperty(i)){ + this.setProperty('animation-' + i, props[i]) } } - return this.setVendorProperty('animation-name', name); + return this.setProperty('animation-name', name); } /** @@ -369,7 +389,7 @@ n = this._duration = 'string' == typeof n ? parseFloat(n) * 1000 : n; - return this.setVendorProperty('transition-duration', n + 'ms'); + return this.setProperty('transition-duration', n + 'ms'); }; /** @@ -384,7 +404,7 @@ n = 'string' == typeof n ? parseFloat(n) * 1000 : n; - return this.setVendorProperty('transition-delay', n + 'ms'); + return this.setProperty('transition-delay', n + 'ms'); }; /** @@ -401,23 +421,7 @@ return this; }; - /** - * Set a vendor prefixed `prop` with the given `val`. - * - * @param {String} prop - * @param {String} val - * @return {Move} for chaining - * @api public - */ - - Move.prototype.setVendorProperty = function(prop, val){ - this.setProperty('-webkit-' + prop, val); - this.setProperty('-moz-' + prop, val); - this.setProperty('-ms-' + prop, val); - this.setProperty('-o-' + prop, val); - return this; - }; - + /** * Set `prop` to `value`, deferred until `.end()` is invoked * and adds the property to the list of transition props. @@ -497,6 +501,22 @@ return this; }; + +/** + * Apply a CSS `prop` with the given `val`. + * + * @param {String} prop + * @param {String} val + * @return {Move} for chaining + * @api public + */ + + Move.prototype.applyProperty = function(prop, val){ + this.el.style.setProperty(move.utils.getSupportedProperty(prop), val, ''); + return this; + }; + + /** * Commit style properties, aka apply them to `el.style`. * @@ -506,15 +526,12 @@ */ Move.prototype.applyProperties = function(){ - var props = this._props - , el = this.el; - + var props = this._props; for (var prop in props) { if (props.hasOwnProperty(prop)) { - el.style.setProperty(prop, props[prop], ''); + this.applyProperty(prop, props[prop]); } } - return this; }; @@ -594,11 +611,10 @@ // transforms if (this._transforms.length) { - this.setVendorProperty('transform', this._transforms.join(' ')); + this.setProperty('transform', this._transforms.join(' ')); } - // transition properties - this.setVendorProperty('transition-property', this._transitionProps.join(', ')); + this.setProperty('transition-property', this._transitionProps.join(', ') + ', ' + move.utils.getSupportedProperty('transform')); this.applyProperties(); // callback given @@ -606,6 +622,8 @@ // emit "end" when complete setTimeout(function(){ + self.setProperty('transform', null); + self.setProperty('transition-property', null); self.emit('end'); }, this._duration); From 72d78cc1cf6dc273a2ad0914672e161efa297287 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=ADn=20Ciparelli?= Date: Sun, 23 Oct 2011 03:34:49 -0300 Subject: [PATCH 2/2] added full animation support. Docs updated --- examples/docs.html | 108 +++++++++++++++++++++++++++++++++++++++++++++ move.js | 64 ++++++++++++++++++++++++--- 2 files changed, 166 insertions(+), 6 deletions(-) diff --git a/examples/docs.html b/examples/docs.html index 09298cf..b85de95 100644 --- a/examples/docs.html +++ b/examples/docs.html @@ -149,7 +149,56 @@ .pop() .end(); }); + play(14, function(){ + move('#example-14 .box') + .animate({ + 0: { + transform: 'skew(50)' + }, + 10: { + 'margin-left': '200px', + transform: 'rotate(90deg)', + 'border-radius': '20px' + }, + 30: { + 'margin-left': '20px', + transform: 'rotate(90deg)' + }, + 80: { + transform: 'rotate(90deg)', + 'border-radius': '10px' + }, + 90: { + 'margin-left': '60px', + transform: 'rotate(25deg)', + 'border-radius': '5px' + }, + 100: { + 'margin-left': '0px', + transform: 'rotate(25deg)', + 'border-radius': '5px' + } + }, { + duration: '3s', + 'iteration-count': 3 + }) + .animate({ + '0%': { + height: '50px', + background: 'green' + }, + '50%': { + height: '30px', + background: 'black' + }, + '100%': { + height: '50px', + background: 'white' + } + }, '4s 1').end(); + }); }, false); +