CSSTransitions class for MooTools 1.2

Author: Ian Collins (3n)

Description

CSSTransitions is an attempt to recreate some of the functionality of MooTool's Fx class, using only CSS Transitions.

Supported

Currently only Tween is (almost) supported.

You can also use CSS Transforms such as rotate and translateY. Just pass in the option is_transform:true. Example:

    $('translateY').addEvent('click', function(){
        new CSSTransitions.Tween(this, {
            property     : 'translateY',
            is_transform : true,
            duration     : 1000,
            transition : 'ease-in-out'
        }).start($('translateY').get_transform_int() + 30 + 'px')
    })

As you can see in that example the value passed to start() is based on the value of that transform, using the get_transform_int method.

What's included

along with the code for this class in css_transitions.js you'll find a version of mootools that contains exactly what is necessary to run this demo. Here are the dependencies: ["Class.Extras","Element.Style","Element.Event","Element.Dimensions"]

To see examples of usage look at index.js

TODO

• Fancy parsing of css selectors and properties like in Fx.CSS.
• Implement 'link' option, like in Fx.
• Option to animate back to starting state.
• Add fade and other Element helpers to Tween.