Animate scale() on Firefox

Animate scale() on Firefox

by Oski Krawczyk

HTML

<div id="pnlBar"> 
    <div id="" class="icon">
    </div> 
</div>

CSS

#pnlBar {
    margin: 50px 0px 0px 50px;
}
.icon {
    width: 64px; height: 64px;
    background-image: url(http://b22222.com/test/text64.png);
    cursor: pointer;
}

JavaScript

// original idea: http://b22222.com/test/testcss3.html
// 
// VERY BUGGY
// 

Fx.CSS.Parsers.extend({
 
    TransformRotate: {
        parse: function(value){
            return ((value = value.match(/^scale\(([0-9][\.][0-9])\)$/i))) ? value[1] : false;
        },
        compute: function(from, to, delta){
            return parseFloat(Fx.compute(from, to, delta));
        },
        serve: function(value){
            return 'scale('+value+')';
        }
    }
    
});

$$('.icon').each(function(i) {
    i.addEvent('click', function(e) {
        var fx = new Fx.Morph(i, {
            duration: 800,
            transition: 'back:out'
        });
        fx.start({
            '-moz-transform': ['scale(0.0)', 'scale(1.5)'],
            '-webkit-transform': ['scale(0.0)', 'scale(1.5)']
        });
    });
});