Permalink
Browse files

Added support for Fx.Morph

Added myself as an author
  • Loading branch information...
1 parent 530f3ad commit 2a86606f3b529189ab916a66becf4094e69bef0e @mcfedr committed Aug 31, 2011
Showing with 568 additions and 300 deletions.
  1. +23 −3 Examples/index.html
  2. +1 −1 Examples/test.html
  3. +1 −1 Examples/test2.html
  4. +1 −1 Examples/test3.html
  5. +6 −6 README.md
  6. +266 −0 Source/Fx.CSS3.Replacement.js
  7. +260 −0 Source/Fx.CSS3.js
  8. +0 −141 Source/Fx.Tween.CSS3.Replacement.js
  9. +0 −139 Source/Fx.Tween.CSS3.js
  10. +1 −0 license
  11. +9 −8 package.yml
View
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.
@@ -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;
+
+})();
Oops, something went wrong.

0 comments on commit 2a86606

Please sign in to comment.