Fx.Implicit 0.1

Cross-browser implicit animations analogous to WebKit's CSS-transitions.



Details

Author
Ben Lenarts
Current version
0.1
GitHub
benlenarts/Fx.Implicit
Downloads
3824
Category
Effects
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Fx.Implicit
    • core/1.2.4: Element.Event
    • core/1.2.4: Fx.Morph

How to use

Just write CSS for different visual states:

.box { background-color: blue; }
.box.alternate { background-color: red; }

And register the implicit animation in javascript:

Fx.Implicit.add('.box', {properties: ['background-color']});

This call doesn't require HTML to be present, so you can execute it whenever you want.

The options available are those of Fx, plus the properties option which allows you to specify the CSS properties you want to animate.

Style changes are automatically detected within events and timed functions. The following code will cause the background color of every element with the box class to animate whenever it is clicked:

$$('.box').addEvent('click', function() {
  this.toggleClass('alternate');
});

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus