2

I have a case where I'd like to animate the zoom style of a div (and it's entire contents). Legibility is not an issue, as this will be to 'pop' the element into view. Now I can get just about every other style aspect animating with Fx, but I can't seem to get this working for the zoom.

This is in chrome (though obviously I want to get it browser agnostic as well).

Using the Elements tab in the Chrome dev tools I can manually set the zoom style on the html element and it behaves accordingly, so I knew it must be possible to modify in code. Using the answer on this question: zoom css/javascript I can get the element to zoom in and out with code:

dialog.setStyle('WebkitTransform', 'scale(0.1)')

Now I could write a 'native' function to do this, but then I'd lose out on all the great animation options in Fx. Can anyone suggest an elegent way to achieve this with Fx?

Community
  • 1
  • 1
FlintZA
  • 872
  • 1
  • 11
  • 22

1 Answers1

3

yes, you need to hack some of the CSS parsers in the mootools core to enable FX to work with them.

check this fun example I did a while back for another SO problem: http://jsfiddle.net/dimitar/ZwMUH/ - click on any 2 icons to swap them and it will transition them via scale.

or this light box base class I wrote that also uses it: http://jsfiddle.net/dimitar/6creP/

at its basic, start by modding the parsers:

Element.Styles.MozTransform = "rotate(@deg) scale(@)";
Element.Styles.MsTransform = "rotate(@deg) scale(@)";
Element.Styles.OTransform = "rotate(@deg) scale(@)";
Element.Styles.WebkitTransform = "rotate(@deg) scale(@)";

Object.append(Fx.CSS.Parsers, {

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

});

also relevant, define public and scripting vers of all styles cross browser:

transforms: {
    computed: ['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform'],
    raw: ['transform', '-webkit-transform', '-moz-transform', '-o-transform', 'msTransform']
};

detection method which will loop through the transforms defined above and return the first one that the element supports as the definitive property to work with in the future, or opacity as fallback if unavailable:

        var testEl = new Element("div"),
            self = this;
        this.scaleTransform = this.options.transforms.computed.some(function(el, index) {
            var test = el in testEl.style;
            if (test) {
                self.prop = self.options.transforms.raw[index];
            }

            return test;
        });

        if (!this.prop) {
            this.prop = "opacity";
        }

then this.prop will refer to the correct browser property, vendor prefixed or opacity as fallback for tweening/morphing whereas this.scaleTransform will be a boolean that points to the ability to scale - you can then check against that to see if its supported when you are creating the morph object.

The object itself would be like this:

var morphObj = {};
morphObj[this.prop] = ["scale(0)", "scale(1)"]; // call it dynamically 
el.morph(morphObj);

other solutions are available such as this plugin http://mootools.net/forge/p/fx_tween_css3, there's also one by Theiry Bela I know of: https://github.com/tbela99/Fx.css

its also going to be natively available in mootools 2.0

have fun.

Dimitar Christoff
  • 26,147
  • 8
  • 50
  • 69