Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added support for Fx.Morph

Added myself as an author
  • Loading branch information...
commit 2a86606f3b529189ab916a66becf4094e69bef0e 1 parent 530f3ad
@mcfedr authored
View
26 Examples/index.html
@@ -6,7 +6,7 @@
<style type="text/css">
- #test {
+ #test, #test2 {
font-family: Verdana, Arial;
color: #fff;
background: lime;
@@ -18,7 +18,7 @@
</style>
<script type="text/javascript" src="mootools-core-1.3-full-nocompat.js"></script>
-<script type="text/javascript" src="../Source/Fx.Tween.CSS3.js"></script>
+<script type="text/javascript" src="../Source/Fx.CSS3.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
@@ -29,7 +29,7 @@
});
fx.addEvent('complete', function(){
- alert('complete');
+ console.log('complete')
});
var to = 100;
@@ -38,6 +38,23 @@
fx.start('height', (to == 100 ? (to = 300) : (to = 100)));
//fx.cancel.delay(200, fx);
});
+
+ var fx2 = new Fx.Morph.CSS3('test2', {
+ duration: 605,
+ transition: 'quint:in'
+ });
+
+ fx2.addEvent('complete', function(){
+ console.log('complete')
+ });
+
+ var to = 100;
+ $('test2').addEvent('click', function(){
+ //fx.start('height', 100, 300);
+ fx2.start({'height' : [200, (to == 100 ? 300 : 100)],
+ 'width' : [200, (to == 100 ? (to = 300) : (to = 100))] });
+ //fx.cancel.delay(200, fx);
+ });
});
@@ -48,5 +65,8 @@
<div id="test">
click here to test tween
</div>​
+ <div id="test2">
+ click here to test morph
+ </div>​
</body>
</html>
View
2  Examples/test.html
@@ -31,7 +31,7 @@
</style>
<script type="text/javascript" src="mootools-core-1.3-full-nocompat.js"></script>
-<script type="text/javascript" src="../Source/Fx.Tween.CSS3.js"></script>
+<script type="text/javascript" src="../Source/Fx.CSS3.js"></script>
<script type="text/javascript">
Global = {};
View
2  Examples/test2.html
@@ -30,7 +30,7 @@
</style>
<script type="text/javascript" src="mootools-core-1.3-full-nocompat.js"></script>
-<script type="text/javascript" src="../Source/Fx.Tween.CSS3.js"></script>
+<script type="text/javascript" src="../Source/Fx.CSS3.js"></script>
<script type="text/javascript">
Global = {};
View
2  Examples/test3.html
@@ -23,7 +23,7 @@
</style>
<script type="text/javascript" src="mootools-core-1.3-full-nocompat.js"></script>
-<script type="text/javascript" src="../Source/Fx.Tween.CSS3.js"></script>
+<script type="text/javascript" src="../Source/Fx.CSS3.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
View
12 README.md
@@ -1,17 +1,17 @@
-Fx.Tween.CSS3
+Fx.CSS3
=========
-Mimics the Fx.Tween behavior but tries to use native CSS3 transition if possible.
-Like the Fx.Tween effect, Fx.Tween.CSS3 is used to transition any CSS property from one value to another.
+Mimics the Fx behavior but tries to use native CSS3 transition if possible.
+Like the Fx effect, Fx.CSS3 is used to transition any CSS property from one value to another.
-![Screenshot](https://github.com/SunboX/mootools-fx-tween-css3/raw/master/screen.png)
+![Screenshot](https://github.com/mcfedr/mootools-fx-tween-css3/raw/master/screen.png)
Demos:
----------
-- You can see a simple online demo in [this shell](http://jsfiddle.net/SunboX/TAVWa/84/)
+- You can see a simple online demo in [this shell](http://jsfiddle.net/mcfedr/6tX7A/)
- More complex demo: [SqueezeBox using Fx.Tween.CSS3](http://jsfiddle.net/SunboX/bmMCy/)
@@ -80,4 +80,4 @@ How to use
License
----------
-See [license](http://github.com/SunboX/mootools-fx-tween-css3/blob/master/license) file.
+See [license](http://github.com/mcfedr/mootools-fx-tween-css3/blob/master/license) file.
View
266 Source/Fx.CSS3.Replacement.js
@@ -0,0 +1,266 @@
+/*
+---
+name: Fx.CSS3
+script: Fx.CSS3.Replacementjs
+license: MIT-style license.
+description: Tries to do all Tween and Morphs using css3 transition rather than javascript animation. Overrides Fx.Tween and Fx.Morph
+copyright: Copyright (c) 2010, Dipl.-Ing. (FH) André Fiedler <kontakt at visualdrugs dot net>, based on code by eskimoblood (mootools users group)
+copyright: Copyright (c) 2011 Fred Cox mcfedr@gmail.com
+authors: [Fred Cox, André Fiedler, eskimoblood]
+
+requires: [Core/Class.Extras, Core/Element.Event, Core/Element.Style, Core/Fx.Tween, Core/Fx.Morph]
+
+provides: [Fx.Tween.CSS3, Fx.Morph.CSS3]
+...
+*/
+
+(function() {
+
+Element.NativeEvents.transitionend = 2;
+Element.NativeEvents.webkitTransitionEnd = 2;
+Element.NativeEvents.oTransitionEnd = 2;
+Element.NativeEvents.msTransitionEnd = 2;
+
+Element.Events.transitionend = {
+ base: Browser.safari || Browser.chrome ? 'webkitTransitionEnd' : (Browser.opera ? 'oTransitionEnd' : (Browser.ie && Browser.version > 8 ? 'msTransitionEnd' : 'transitionend'))
+};
+
+Event.implement({
+
+ getPropertyName: function(){
+ return this.event.propertyName;
+ },
+
+ getElapsedTime: function(nativeTime){
+ return nativeTime ? this.event.elapsedTime : (this.event.elapsedTime * 1000).toInt();
+ }
+
+});
+
+Element.implement({
+
+ supportStyle: function(style){
+ var value = this.style[style];
+ return !!(value || value === '');
+ },
+
+ supportVendorStyle: function(style){
+ var prefixedStyle = null;
+ return this.supportStyle(style) ? style : ['webkit', 'Moz', 'o', 'ms'].some(function(prefix){
+ prefixedStyle = prefix + style.camelCase().capitalize();
+ return this.supportStyle(prefixedStyle);
+ }, this) ? prefixedStyle : null;
+ }
+
+});
+
+Array.implement({
+ reduce: function(func) {
+ var result = null;
+ this.each(function(el) {
+ result = func(result, el);
+ });
+ return result;
+ },
+ containsArray: function(array) {
+ return array.every(function(v) {
+ return this.contains(v);
+ }, this);
+ }
+});
+
+var transitionTimings = {
+ 'linear' : '0,0,1,1',
+ 'expo:in' : '0.71,0.01,0.83,0',
+ 'expo:out' : '0.14,1,0.32,0.99',
+ 'expo:in:out' : '0.85,0,0.15,1',
+ 'circ:in' : '0.34,0,0.96,0.23',
+ 'circ:out' : '0,0.5,0.37,0.98',
+ 'circ:in:out' : '0.88,0.1,0.12,0.9',
+ 'sine:in' : '0.22,0.04,0.36,0',
+ 'sine:out' : '0.04,0,0.5,1',
+ 'sine:in:out' : '0.37,0.01,0.63,1',
+ 'quad:in' : '0.14,0.01,0.49,0',
+ 'quad:out' : '0.01,0,0.43,1',
+ 'quad:in:out' : '0.47,0.04,0.53,0.96',
+ 'cubic:in' : '0.35,0,0.65,0',
+ 'cubic:out' : '0.09,0.25,0.24,1',
+ 'cubic:in:out' : '0.66,0,0.34,1',
+ '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'];
+
+var CSS3 = new Class({
+
+ cancel: function(){
+ if (this.css3Supported){
+ this.element.setStyle(this.transition, 'none');
+ this.element.removeEvent('transitionend', this.boundComplete);
+ this.boundComplete = null;
+ }
+ this.parent();
+ return this;
+ },
+
+ stop: function() {
+ if (this.css3Supported){
+ return this;
+ }
+ return this.parent();
+ },
+
+ pause: function() {
+ if (this.css3Supported){
+ return this;
+ }
+ return this.parent();
+ },
+
+ resume: function() {
+ if (this.css3Supported){
+ return this;
+ }
+ return this.parent();
+ },
+
+ isRunning: function() {
+ if (this.css3Supported){
+ return !!this.boundComplete;
+ }
+ return this.parent();
+ }
+});
+
+var tweenCSS2 = Fx.Tween;
+
+Fx.Tween = new Class({
+
+ Extends: tweenCSS2,
+ Implements: CSS3,
+
+ initialize: function(element, options){
+ options.transition = options.transition || 'sine:in:out';
+ this.parent(element, options);
+ if (typeof this.options.transition != 'string') alert('Only short notated transitions (like \'sine:in\') are supported by Fx.Tween.CSS3');
+ this.options.transition = this.options.transition.toLowerCase();
+ this.transition = this.element.supportVendorStyle('transition');
+ this.css3Supported = !!this.transition && !!transitionTimings[this.options.transition];
+ },
+
+ check: function(property){
+ return (this.css3Supported && !this.boundComplete && animatable.contains(property)) || this.parent();
+ },
+
+ start: function(property, from, to){
+ if (this.css3Supported){
+ if (!this.check(property, from, to)) return this;
+ var args = Array.flatten(arguments);
+ this.property = this.options.property || args.shift();
+ 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('transitionend', this.boundComplete);
+ this.boundComplete = null;
+ this.fireEvent('complete', this);
+ }
+ }.bind(this);
+ this.element.addEvent('transitionend', this.boundComplete);
+ var trans = function(){
+ this.element.setStyle(this.transition, this.property + ' ' + this.options.duration + 'ms cubic-bezier(' + transitionTimings[this.options.transition] + ')');
+ this.element.setStyle(this.property, this.to[0].value + this.options.unit);
+ }.bind(this);
+ if (args[1]){
+ this.element.setStyle(this.transition, 'none');
+ this.element.setStyle(this.property, this.from[0].value + this.options.unit);
+ trans.delay(0.1);
+ } else
+ trans();
+ this.fireEvent('start', this);
+ return this;
+ }
+ return this.parent(property, from, to);
+ }
+});
+
+Fx.Tween.CSS2 = tweenCSS2;
+Fx.Tween.CSS3 = Fx.Tween;
+
+var morphCSS2 = Fx.Morph;
+
+Fx.Morph = new Class({
+
+ Extends: morphCSS2,
+ Implements: CSS3,
+
+ initializeCSS3: function(element, options){
+ options.transition = options.transition || 'sine:in:out';
+ this.parent(element, options);
+ if (typeof this.options.transition != 'string') alert('Only short notated transitions (like \'sine:in\') are supported by Fx.Tween.CSS3');
+ this.options.transition = this.options.transition.toLowerCase();
+ this.transitionProperty = this.element.supportVendorStyle('transition-property');
+ this.transitionDuration = this.element.supportVendorStyle('transition-duration');
+ this.transitionTimingFunction = this.element.supportVendorStyle('transition-timing-function');
+ this.css3Supported = !!this.transitionProperty && !!transitionTimings[this.options.transition];
+ },
+
+ check: function(properties){
+ return (this.css3Supported && !this.boundComplete && animatable.containsArray(Object.keys(properties))) || this.parent();
+ },
+
+ start: function(properties){
+ if (this.css3Supported){
+ if (!this.check(properties)) 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;
+ }
+ 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('transitionend', this.boundComplete);
+ this.boundComplete = null;
+ this.fireEvent('complete', this);
+ }
+ }.bind(this);
+
+ this.element.addEvent('transitionend', this.boundComplete);
+ var trans = function(){
+ var transStyles = {};
+ transStyles[this.transitionProperty] = Object.keys(properties).reduce(function(a, b) { return a + ', ' + b; });
+ transStyles[this.transitionDuration] = this.options.duration + 'ms';
+ transStyles[this.transitionTimingFunction] = 'cubic-bezier(' + transitionTimings[this.options.transition] + ')';
+ this.element.setStyles(transStyles);
+ this.element.setStyles(Object.map(to, function(v) { return v[0].value; }.bind(this)));
+ }.bind(this);
+ this.element.setStyle(this.transitionProperty, 'none');
+ this.element.setStyles(Object.map(from, function(v) { return v[0].value; }.bind(this)));
+ trans.delay(0.1);
+ this.fireEvent('start', this);
+ return this;
+ }
+ return this.parent(properties);
+ }
+});
+
+Fx.Morph.CSS2 = morphCSS2;
+Fx.Morph.CSS3 = Fx.Morph;
+
+})();
View
260 Source/Fx.CSS3.js
@@ -0,0 +1,260 @@
+/*
+---
+name: Fx.CSS3
+script: Fx.CSS3.js
+license: MIT-style license.
+description: Tries to do all Tween and Morphs using css3 transition rather than javascript animation
+copyright: Copyright (c) 2011 Fred Cox mcfedr@gmail.com
+copyright: Copyright (c) 2010, Dipl.-Ing. (FH) André Fiedler <kontakt at visualdrugs dot net>, based on code by eskimoblood (mootools users group)
+authors: [Fred Cox, André Fiedler, eskimoblood]
+
+requires: [Core/Class.Extras, Core/Element.Event, Core/Element.Style, Core/Fx.Tween, Core/Fx.Morph]
+
+provides: [Fx.Tween.CSS3, Fx.Morph.CSS3]
+...
+*/
+
+(function() {
+
+Element.NativeEvents.transitionend = 2;
+Element.NativeEvents.webkitTransitionEnd = 2;
+Element.NativeEvents.oTransitionEnd = 2;
+Element.NativeEvents.msTransitionEnd = 2;
+
+Element.Events.transitionend = {
+ base: Browser.safari || Browser.chrome ? 'webkitTransitionEnd' : (Browser.opera ? 'oTransitionEnd' : (Browser.ie && Browser.version > 8 ? 'msTransitionEnd' : 'transitionend'))
+};
+
+Event.implement({
+
+ getPropertyName: function(){
+ return this.event.propertyName;
+ },
+
+ getElapsedTime: function(nativeTime){
+ return nativeTime ? this.event.elapsedTime : (this.event.elapsedTime * 1000).toInt();
+ }
+
+});
+
+Element.implement({
+
+ supportStyle: function(style){
+ var value = this.style[style];
+ return !!(value || value === '');
+ },
+
+ supportVendorStyle: function(style){
+ var prefixedStyle = null;
+ return this.supportStyle(style) ? style : ['webkit', 'Moz', 'o', 'ms'].some(function(prefix){
+ prefixedStyle = prefix + style.camelCase().capitalize();
+ return this.supportStyle(prefixedStyle);
+ }, this) ? prefixedStyle : null;
+ }
+
+});
+
+Array.implement({
+ reduce: function(func) {
+ var result = null;
+ this.each(function(el) {
+ result = func(result, el);
+ });
+ return result;
+ },
+ containsArray: function(array) {
+ return array.every(function(v) {
+ return this.contains(v);
+ }, this);
+ }
+});
+
+var transitionTimings = {
+ 'linear' : '0,0,1,1',
+ 'expo:in' : '0.71,0.01,0.83,0',
+ 'expo:out' : '0.14,1,0.32,0.99',
+ 'expo:in:out' : '0.85,0,0.15,1',
+ 'circ:in' : '0.34,0,0.96,0.23',
+ 'circ:out' : '0,0.5,0.37,0.98',
+ 'circ:in:out' : '0.88,0.1,0.12,0.9',
+ 'sine:in' : '0.22,0.04,0.36,0',
+ 'sine:out' : '0.04,0,0.5,1',
+ 'sine:in:out' : '0.37,0.01,0.63,1',
+ 'quad:in' : '0.14,0.01,0.49,0',
+ 'quad:out' : '0.01,0,0.43,1',
+ 'quad:in:out' : '0.47,0.04,0.53,0.96',
+ 'cubic:in' : '0.35,0,0.65,0',
+ 'cubic:out' : '0.09,0.25,0.24,1',
+ 'cubic:in:out' : '0.66,0,0.34,1',
+ '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'];
+
+var CSS3 = new Class({
+
+ cancel: function(){
+ if (this.css3Supported){
+ this.element.setStyle(this.transition, 'none');
+ this.element.removeEvent('transitionend', this.boundComplete);
+ this.boundComplete = null;
+ }
+ this.parent();
+ return this;
+ },
+
+ stop: function() {
+ if (this.css3Supported){
+ return this;
+ }
+ return this.parent();
+ },
+
+ pause: function() {
+ if (this.css3Supported){
+ return this;
+ }
+ return this.parent();
+ },
+
+ resume: function() {
+ if (this.css3Supported){
+ return this;
+ }
+ return this.parent();
+ },
+
+ isRunning: function() {
+ if (this.css3Supported){
+ return !!this.boundComplete;
+ }
+ return this.parent();
+ }
+});
+
+Fx.Tween.CSS2 = Fx.Tween;
+
+Fx.Tween.CSS3 = new Class({
+
+ Extends: Fx.Tween.CSS2,
+ Implements: CSS3,
+
+ initialize: function(element, options){
+ options.transition = options.transition || 'sine:in:out';
+ this.parent(element, options);
+ if (typeof this.options.transition != 'string') alert('Only short notated transitions (like \'sine:in\') are supported by Fx.Tween.CSS3');
+ this.options.transition = this.options.transition.toLowerCase();
+ this.transition = this.element.supportVendorStyle('transition');
+ this.css3Supported = !!this.transition && !!transitionTimings[this.options.transition];
+ },
+
+ check: function(property){
+ return (this.css3Supported && !this.boundComplete && animatable.contains(property)) || this.parent();
+ },
+
+ start: function(property, from, to){
+ if (this.css3Supported){
+ if (!this.check(property, from, to)) return this;
+ var args = Array.flatten(arguments);
+ this.property = this.options.property || args.shift();
+ 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('transitionend', this.boundComplete);
+ this.boundComplete = null;
+ this.fireEvent('complete', this);
+ }
+ }.bind(this);
+ this.element.addEvent('transitionend', this.boundComplete);
+ var trans = function(){
+ this.element.setStyle(this.transition, this.property + ' ' + this.options.duration + 'ms cubic-bezier(' + transitionTimings[this.options.transition] + ')');
+ this.element.setStyle(this.property, this.to[0].value + this.options.unit);
+ }.bind(this);
+ if (args[1]){
+ this.element.setStyle(this.transition, 'none');
+ this.element.setStyle(this.property, this.from[0].value + this.options.unit);
+ trans.delay(0.1);
+ } else
+ trans();
+ this.fireEvent('start', this);
+ return this;
+ }
+ return this.parent(property, from, to);
+ }
+});
+
+Fx.Morph.CSS2 = Fx.Morph;
+
+Fx.Morph.CSS3 = new Class({
+
+ Extends: Fx.Morph.CSS2,
+ Implements: CSS3,
+
+ initializeCSS3: function(element, options){
+ options.transition = options.transition || 'sine:in:out';
+ this.parent(element, options);
+ if (typeof this.options.transition != 'string') alert('Only short notated transitions (like \'sine:in\') are supported by Fx.Tween.CSS3');
+ this.options.transition = this.options.transition.toLowerCase();
+ this.transitionProperty = this.element.supportVendorStyle('transition-property');
+ this.transitionDuration = this.element.supportVendorStyle('transition-duration');
+ this.transitionTimingFunction = this.element.supportVendorStyle('transition-timing-function');
+ this.css3Supported = !!this.transitionProperty && !!transitionTimings[this.options.transition];
+ },
+
+ check: function(properties){
+ return (this.css3Supported && !this.boundComplete && animatable.containsArray(Object.keys(properties))) || this.parent();
+ },
+
+ start: function(properties){
+ if (this.css3Supported){
+ if (!this.check(properties)) 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;
+ }
+ 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('transitionend', this.boundComplete);
+ this.boundComplete = null;
+ this.fireEvent('complete', this);
+ }
+ }.bind(this);
+
+ this.element.addEvent('transitionend', this.boundComplete);
+ var trans = function(){
+ var transStyles = {};
+ transStyles[this.transitionProperty] = Object.keys(properties).reduce(function(a, b) { return a + ', ' + b; });
+ transStyles[this.transitionDuration] = this.options.duration + 'ms';
+ transStyles[this.transitionTimingFunction] = 'cubic-bezier(' + transitionTimings[this.options.transition] + ')';
+ this.element.setStyles(transStyles);
+ this.element.setStyles(Object.map(to, function(v) { return v[0].value; }.bind(this)));
+ }.bind(this);
+ this.element.setStyle(this.transitionProperty, 'none');
+ this.element.setStyles(Object.map(from, function(v) { return v[0].value; }.bind(this)));
+ trans.delay(0.1);
+ this.fireEvent('start', this);
+ return this;
+ }
+ return this.parent(properties);
+ }
+});
+
+})();
View
141 Source/Fx.Tween.CSS3.Replacement.js
@@ -1,141 +0,0 @@
-/*
----
-name: Fx.Tween.CSS3.Replacement
-script: Fx.Tween.CSS3.Replacement.js
-license: MIT-style license.
-description: Same behavior like Fx.Tween but tries to use native CSS3 transition if possible (Overwrites Fx.Tween).
-copyright: Copyright (c) 2010, Dipl.-Ing. (FH) André Fiedler <kontakt at visualdrugs dot net>, based on code by eskimoblood (mootools users group)
-authors: [André Fiedler, eskimoblood]
-
-requires: [Core/Class.Extras, Core/Element.Event, Core/Element.Style, Core/Fx.Tween]
-
-provides: [Fx.Tween]
-...
-*/
-
-Element.NativeEvents.transitionend = 2;
-Element.NativeEvents.webkitTransitionEnd = 2;
-Element.NativeEvents.oTransitionEnd = 2;
-Element.NativeEvents.msTransitionEnd = 2;
-
-Element.Events.transitionend = {
- base: Browser.safari || Browser.chrome ? 'webkitTransitionEnd' : (Browser.opera ? 'oTransitionEnd' : (Browser.ie && Browser.version > 8 ? 'msTransitionEnd' : 'transitionend'))
-};
-
-Event.implement({
-
- getPropertyName: function(){
- return this.event.propertyName;
- },
-
- getElapsedTime: function(nativeTime){
- return nativeTime ? this.event.elapsedTime : (this.event.elapsedTime * 1000).toInt();
- }
-
-});
-
-Element.implement({
-
- supportStyle: function(style){
- var value = this.style[style];
- return !!(value || value === '');
- },
-
- supportVendorStyle: function(style){
- var prefixedStyle = null;
- return this.supportStyle(style) ? style : ['webkit', 'Moz', 'o', 'ms'].some(function(prefix){
- prefixedStyle = prefix + style.capitalize();
- return this.supportStyle(prefixedStyle);
- }, this) ? prefixedStyle : null;
- }
-
-});
-
-Fx.TweenCSS2 = Fx.Tween;
-
-Fx.Tween = new Class({
-
- Extends: Fx.TweenCSS2,
-
- transitionTimings: {
- 'linear' : '0,0,1,1',
- 'expo:in' : '0.71,0.01,0.83,0',
- 'expo:out' : '0.14,1,0.32,0.99',
- 'expo:in:out' : '0.85,0,0.15,1',
- 'circ:in' : '0.34,0,0.96,0.23',
- 'circ:out' : '0,0.5,0.37,0.98',
- 'circ:in:out' : '0.88,0.1,0.12,0.9',
- 'sine:in' : '0.22,0.04,0.36,0',
- 'sine:out' : '0.04,0,0.5,1',
- 'sine:in:out' : '0.37,0.01,0.63,1',
- 'quad:in' : '0.14,0.01,0.49,0',
- 'quad:out' : '0.01,0,0.43,1',
- 'quad:in:out' : '0.47,0.04,0.53,0.96',
- 'cubic:in' : '0.35,0,0.65,0',
- 'cubic:out' : '0.09,0.25,0.24,1',
- 'cubic:in:out' : '0.66,0,0.34,1',
- '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'
- },
-
- initialize: function(element, options){
- options.transition = options.transition || 'sine:in:out';
- this.parent(element, options);
- if (typeof this.options.transition != 'string') alert('Only short notated transitions (like \'sine:in\') are supported by Fx.Tween.CSS3');
- this.options.transition = this.options.transition.toLowerCase();
- this.transition = this.element.supportVendorStyle('transition');
- this.css3Supported = !!this.transition && !!this.transitionTimings[this.options.transition];
- },
-
- check: function(){
- if (!this.boundComplete) return true;
- return this.parent();
- },
-
- start: function(property, from, to){
- if (this.css3Supported){
- if (!this.check(property, from, to)) return this;
- var args = Array.flatten(arguments);
- this.property = this.options.property || args.shift();
- 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 /* && event.getElapsedTime() == this.options.duration */ ){
- this.element.removeEvent('transitionend', this.boundComplete);
- this.boundComplete = null;
- this.fireEvent('complete', this);
- }
- }.bind(this);
- this.element.addEvent('transitionend', this.boundComplete);
- var trans = function(){
- this.element.setStyle(this.transition, this.property + ' ' + this.options.duration + 'ms cubic-bezier(' + this.transitionTimings[this.options.transition] + ')');
- this.element.setStyle(this.property, this.to[0].value + this.options.unit);
- }.bind(this);
- if (args[1]){
- this.element.setStyle(this.transition, 'none');
- this.element.setStyle(this.property, this.from[0].value + this.options.unit);
- trans.delay(0.1);
- } else
- trans();
- this.fireEvent('start', this);
- return this;
- }
- return this.parent(property, from, to);
- },
-
- cancel: function(){
- if (this.css3Supported){
- this.element.setStyle(this.transition, 'none');
- this.element.removeEvent('transitionend', this.boundComplete);
- this.boundComplete = null;
- }
- this.parent();
- return this;
- }
-
-});
View
139 Source/Fx.Tween.CSS3.js
@@ -1,139 +0,0 @@
-/*
----
-name: Fx.Tween.CSS3
-script: Fx.Tween.CSS3.js
-license: MIT-style license.
-description: Same behavior like Fx.Tween but tries to use native CSS3 transition if possible.
-copyright: Copyright (c) 2010, Dipl.-Ing. (FH) André Fiedler <kontakt at visualdrugs dot net>, based on code by eskimoblood (mootools users group)
-authors: [André Fiedler, eskimoblood]
-
-requires: [Core/Class.Extras, Core/Element.Event, Core/Element.Style, Core/Fx.Tween]
-
-provides: [Fx.Tween.CSS3]
-...
-*/
-
-Element.NativeEvents.transitionend = 2;
-Element.NativeEvents.webkitTransitionEnd = 2;
-Element.NativeEvents.oTransitionEnd = 2;
-Element.NativeEvents.msTransitionEnd = 2;
-
-Element.Events.transitionend = {
- base: Browser.safari || Browser.chrome ? 'webkitTransitionEnd' : (Browser.opera ? 'oTransitionEnd' : (Browser.ie && Browser.version > 8 ? 'msTransitionEnd' : 'transitionend'))
-};
-
-Event.implement({
-
- getPropertyName: function(){
- return this.event.propertyName;
- },
-
- getElapsedTime: function(nativeTime){
- return nativeTime ? this.event.elapsedTime : (this.event.elapsedTime * 1000).toInt();
- }
-
-});
-
-Element.implement ({
-
- supportStyle: function(style){
- var value = this.style[style];
- return !!(value || value === '');
- },
-
- supportVendorStyle: function(style){
- var prefixedStyle = null;
- return this.supportStyle(style) ? style : ['webkit', 'Moz', 'o', 'ms'].some(function(prefix){
- prefixedStyle = prefix + style.capitalize();
- return this.supportStyle(prefixedStyle);
- }, this) ? prefixedStyle : null;
- }
-
-});
-
-Fx.Tween.CSS3 = new Class({
-
- Extends: Fx.Tween,
-
- transitionTimings: {
- 'linear' : '0,0,1,1',
- 'expo:in' : '0.71,0.01,0.83,0',
- 'expo:out' : '0.14,1,0.32,0.99',
- 'expo:in:out' : '0.85,0,0.15,1',
- 'circ:in' : '0.34,0,0.96,0.23',
- 'circ:out' : '0,0.5,0.37,0.98',
- 'circ:in:out' : '0.88,0.1,0.12,0.9',
- 'sine:in' : '0.22,0.04,0.36,0',
- 'sine:out' : '0.04,0,0.5,1',
- 'sine:in:out' : '0.37,0.01,0.63,1',
- 'quad:in' : '0.14,0.01,0.49,0',
- 'quad:out' : '0.01,0,0.43,1',
- 'quad:in:out' : '0.47,0.04,0.53,0.96',
- 'cubic:in' : '0.35,0,0.65,0',
- 'cubic:out' : '0.09,0.25,0.24,1',
- 'cubic:in:out' : '0.66,0,0.34,1',
- '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'
- },
-
- initialize: function(element, options){
- options.transition = options.transition || 'sine:in:out';
- this.parent(element, options);
- if (typeof this.options.transition != 'string') alert('Only short notated transitions (like \'sine:in\') are supported by Fx.Tween.CSS3');
- this.options.transition = this.options.transition.toLowerCase();
- this.transition = this.element.supportVendorStyle('transition');
- this.css3Supported = !!this.transition && !!this.transitionTimings[this.options.transition];
- },
-
- check: function(){
- if (!this.boundComplete) return true;
- return this.parent();
- },
-
- start: function(property, from, to){
- if (this.css3Supported){
- if (!this.check(property, from, to)) return this;
- var args = Array.flatten(arguments);
- this.property = this.options.property || args.shift();
- 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 /* && event.getElapsedTime() == this.options.duration */ ){
- this.element.removeEvent('transitionend', this.boundComplete);
- this.boundComplete = null;
- this.fireEvent('complete', this);
- }
- }.bind(this);
- this.element.addEvent('transitionend', this.boundComplete);
- var trans = function(){
- this.element.setStyle(this.transition, this.property + ' ' + this.options.duration + 'ms cubic-bezier(' + this.transitionTimings[this.options.transition] + ')');
- this.element.setStyle(this.property, this.to[0].value + this.options.unit);
- }.bind(this);
- if (args[1]){
- this.element.setStyle(this.transition, 'none');
- this.element.setStyle(this.property, this.from[0].value + this.options.unit);
- trans.delay(0.1);
- } else
- trans();
- this.fireEvent('start', this);
- return this;
- }
- return this.parent(property, from, to);
- },
-
- cancel: function(){
- if (this.css3Supported){
- this.element.setStyle(this.transition, 'none');
- this.element.removeEvent('transitionend', this.boundComplete);
- this.boundComplete = null;
- }
- this.parent();
- return this;
- }
-
-});
View
1  license
@@ -1,5 +1,6 @@
The MIT License
+Copyright (c) 2011 Fred Cox mcfedr@gmail.com
Copyright (c) 2010 Dipl.-Ing. (FH) André Fiedler <kontakt at visualdrugs dot net>
Permission is hereby granted, free of charge, to any person obtaining a copy
View
17 package.yml
@@ -1,26 +1,27 @@
-name: Fx.Tween.CSS3
+name: Fx.CSS3
current: 1.0.2
-web: "[github.com/SunboX/mootools-fx-tween-css3](http://github.com/SunboX/mootools-fx-tween-css3)"
+web: "[github.com/mcfedr/mootools-fx-tween-css3](http://github.com/mcfedr/mootools-fx-tween-css3)"
-description: "Native CSS3 transition for Fx.Tween (if available)"
+description: "Native CSS3 transition for Fx (if available)"
-authors: "[André Fiedler](http://visualdrugs.net)"
+authors: "[Fred Cox](http://fedr.co), [André Fiedler](http://visualdrugs.net)"
license: "MIT License"
+copyright: "Copyright (c) 2011 Fred Cox mcfedr@gmail.com"
copyright: "Copyright (c) 2010, Dipl.-Ing. (FH) André Fiedler <kontakt at visualdrugs dot net>, based on code by eskimoblood (mootools users group)"
sources:
- - "Source/Fx.Tween.CSS3.js"
- - "Source/Fx.Tween.CSS3.Replacement.js"
+ - "Source/Fx.CSS3.js"
+ - "Source/Fx.CSS3.Replacement.js"
# Values for MooTools forge
-author: SunboX
+author: mcfedr
-demo: http://jsfiddle.net/SunboX/TAVWa/84/
+demo: http://jsfiddle.net/mcfedr/6tX7A/
category: Effects
Please sign in to comment.
Something went wrong with that request. Please try again.