使用mootools Fx修改div的缩放

Question

我有一个案例，我想为 div （及其整个内容）的缩放样式设置动画。易读性不是问题，因为这会将元素“弹出”到视图中。现在我可以使用 Fx 获得几乎所有其他风格方面的动画，但我似乎无法在缩放时使用它。

这是在 Chrome 中（尽管显然我也想让它与浏览器无关）。

使用 Chrome 开发工具中的“元素”选项卡，我可以手动设置 html 元素的缩放样式，并且它会做出相应的行为，所以我知道一定可以在代码中进行修改。使用此问题的答案：zoom css/javascript 我可以使用代码来放大和缩小元素：

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

现在我可以编写一个“本机”函数来执行此操作，但这样我就会失去 Fx 中所有出色的动画选项。谁能建议一种使用 Fx 实现这一目标的优雅方法？

Answer 1

是的，您需要破解 mootools 核心中的一些 CSS 解析器才能使 FX 能够使用它们。

检查这个有趣的例子，我不久前为另一个SO问题做过： http://jsfiddle.net/dimitar/ZwMUH/ - 单击任意 2 个图标来交换它们，它将通过缩放来转换它们。

或者我编写的这个灯箱基类也使用它： http://jsfiddle.net/dimitar/6creP/< /a>

从根本上讲，首先修改解析器：

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 + ')';
        }
    }

});

同样相关，跨浏览器定义所有样式的公共和脚本版本：

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

检测方法将循环遍历上面定义的转换并返回元素支持的第一个作为最终属性去工作将来使用，或者如果不可用，则将不透明度作为后备：

        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";
        }

然后 this.prop 将引用正确的浏览器属性、供应商前缀或不透明度作为补间/变形的后备，而 this.scaleTransform 将是一个布尔值，指向缩放能力 - 然后您可以检查它以查看在创建变形对象时是否支持它。

对象本身是这样的：

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

还有其他解决方案，例如这个插件 http://mootools.net/forge /p/fx_tween_css3，我知道还有 Theiry Bela 的一个：https://github.com/tbela99/Fx.css

它也将在 mootools 2.0 中原生提供，

玩得开心。