Por que MooTools remover a margem ao criar uma instância de Fx.Slide?

Question

Eu tenho um <div> com o margin: 0 auto; regra CSS e eu estou usando MooTools para deslizá-la quando necessário.

Parece que a mera instanciação de um objeto Fx.Slide remove a margem no meu elemento. Isto é, enquanto que o elemento usado para ser centrado no interior da sua mãe, ele está agora alinhado à esquerda. Apenas esta linha só parece fazer isso:

var slide = new Fx.Slide('mydiv');

I pode neutralizar este efeito, fazendo algo parecido com isto:

var slide = new Fx.Slide('mydiv');
$('mydiv').setStyle('margin', '0 auto');

Mas este é bruto e eu certamente não quero ter que fazer isso toda vez que me deparo com esta situação. E mais ainda, eu quero saber, Por O MooTools remover a margem em primeiro lugar? Existe uma opção que eu não sei sobre, algum parâmetro que eu negligenciado? Por favor, deixe-me saber, como eu sou novo para MooTools. Enquanto eu estou encontrando rapidamente que suas aplicações estão longe e acima dos jQuery (pelo menos para os meus propósitos), eu estou achando que sua documentação é muito menos detalhada do que a sua sintaxe.

Answer 1

De Fx.Slide.js:

Fx.Slide = new Class({

    /* .. */

    initialize: function(element, options){
        this.addEvent('complete', function(){
            this.open = (this.wrapper['offset' + this.layout.capitalize()] != 0);
            if (this.open && Browser.Engine.webkit419) this.element.dispose().inject(this.wrapper);
        }, true);
        this.element = this.subject = document.id(element);
        this.parent(options);
        var wrapper = this.element.retrieve('wrapper');
        this.wrapper = wrapper || new Element('div', {
            styles: $extend(this.element.getStyles('margin', 'position'), {overflow: 'hidden'})
        }).wraps(this.element);
        this.element.store('wrapper', this.wrapper).setStyle('margin', 0);
        this.now = [];
        this.open = true;
    },

    /* .. */

Como você pode ver, Fx.Slide leva o elemento (this.element) você aplicar a ele, envolve-lo em uma div envoltório (this.wrapper) com overflow: hidden eo margin e position do elemento e, em seguida, remove o margin do elemento.

Assim, removendo o margin é por design. O que eu não entendo é por que a margem não é transferido para o wrapper. Você pode ter algum CSS modificar DIVs simples no elemento pai que está usando !important e está impedindo Fx.Slide de transferir as propriedades corretamente.

Você está usando MooTools 1.2.3 com a versão mais recente do MooTools More (1.2.3.1)?

Além disso, para Fx.Slide ao trabalho corretamente, sua página precisa para estar no modo de padrões. Você tem um doctype XHTML ou HTML (estrita ou de Transição) como a primeira coisa na sua marcação? (No prólogo XML). Na pior das hipóteses, se ele ainda não funcionar, use o seguinte:

$('mydiv').getParent().setStyle('margin', '0 auto');

MooTools é grande framework JavaScript para trabalhar com e eu pessoalmente acho que it é muito mais poderoso do que jQuery (excluindo o fato de que jQuery tem uma enorme comunidade). Infelizmente, o pacote More (que é o equivalente de plugins do jQuery) consistência é um pouco carente em alguns aspectos.