Использование mootools Fx для изменения масштаба div

Question

У меня есть случай, когда я хотел бы анимировать стиль масштабирования div (и всего его содержимого). Разборчивость не является проблемой, так как это будет «выдвигать» элемент в поле зрения. Теперь я могу получить практически любой другой аспект стиля с анимацией в Fx, но я не могу заставить это работать для увеличения.

Это в chrome (хотя, очевидно, я хочу, чтобы браузер также не зависел от него).

Используя вкладку «Элементы» в инструментах разработчика Chrome, я могу вручную установить стиль масштабирования для элемента html, и он будет вести себя соответствующим образом, поэтому я знал, что его можно изменить в коде. Используя ответ на этот вопрос: zoom css / javascript Я могу получить элемент для увеличения и уменьшения с помощью кода:

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

Теперь я мог бы написать «нативную» функцию для этого, но тогда я бы потерял все великолепные опции анимации в Fx. Кто-нибудь может предложить лучший способ добиться этого с помощью Fx?

Answer 1

да, вам нужно взломать некоторые парсеры CSS в ядре mootools, чтобы позволить 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 будет логическим значением, указывающим на возможность масштабирования - вы можете проверить это, чтобы увидеть, поддерживается при создании объекта morph.

Сам объект будет выглядеть так:

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

веселиться.