Question

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

这是在chrome（虽然显然我想让它与浏览器无关）。

使用Chrome开发工具中的Elements选项卡，我可以在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/

在其基础上，首先修改解析器：

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，还有一个由我知道的他们所知道的：https://github.com/tbela99/Fx.css

它也可以在mootools 2.0中原生使用

玩得开心。

使用mootools Fx修改div的缩放

1 个答案: