Light

mcfedr / mootools-fx-css3 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sunbox/mootools-fx-tween-css3

15.0 5.0 4.0 526 KB

Mimics the Mootools Fx.Tween behavior but tries to use native CSS3 transition if possible.

License: MIT License

JavaScript 99.19% Erlang 0.81%

mootools-fx-css3's Introduction

Fx.CSS3

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.

Demos:

You can see a simple online demo in this shell
More complex demo: SqueezeBox using Fx.Tween.CSS3

Options, Events:

Notes:

Only short notated transitions are supported as option.transition by Fx.Tween.CSS3. Like:

new Fx.Tween.CSS3('myElementID', {
	
	transition: 'sine:in'
	
});

Performance:

Tested on OSX 10.6:

Safari 4: 30% faster than Fx.Tween
Google Chrome 5: nearly equal compared to Fx.Tween
Firefox 3.6.3: nearly equal compared to Fx.Tween
Opera 10.53: nearly equal compared to Fx.Tween

Tested on iPhone 3GS:

Mobile Safari: runns a lot faster (and smoother) than Fx.Tween (with default fps)

Tested on Windows 7:

Safari 4: a lot faster than Fx.Tween (200 running instances of Fx.Tween hangs the browser, 200 Fx.Tween.CSS3 instances still working (40% CPU usage))
Google Chrome 5: 50% faster than Fx.Tween
Firefox 3.6.3: nearly equal compared to Fx.Tween
Opera 10.53: nearly equal compared to Fx.Tween

How to use

window.addEvent('domready', function(){
	
    var fx = new Fx.Tween.CSS3('myElementID', {
        duration: 605,
        transition: 'quint:in:out'
    });

    fx.addEvent('complete', function(){
        alert('complete');
    });
		
    fx.start('height', 100, 300);

});

License

See license file.

mootools-fx-css3's People

Contributors

Stargazers

Watchers

Forkers

pmilvich rgthree bolste storeman

mootools-fx-css3's Issues

Doesn't work with latest mootools

In latest mootools Event was renamed to DOMEvent. So, you need to implement stuff on DOMEvent instead, otherwise it would raise an error (only in non-compatible with 1.3 mode).

Transition timing function fallback

Another minute issue I've come across is if the FX.Tween.CSS3 transition option returns something that does not match a property of transitionTimings, the transition doesn't occur. There should be a default timing function (e.g. linear) in these cases.

Chaining issue

Thanks for your code, very useful and easy to implement.

I've got an issue which I can't solve. I'm looking at it for two days, but no solution.

See this fiddle:
http://jsfiddle.net/6SFEA/2/

With this simple example this is not really a problem. But I also use spinners where the advantages of css3 are used, then there are more difficult issues.

Duration option string notation

FX.CSS3 is awesome! And it works well on all browsers which made me implement it in my project.

I noticed a trivial issue where if the Tween duration option uses a string rather than an integer, for example 'short' or 'long', the transition will not fire. I believe that when the transitionDuration is set, there should be a check if this.options.duration returns a string, whether it meets Mootools criteria (is either short, medium or long) and if it so to be converted to an integer.

I should be able to find some time to fix it and make a pull request.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.