This project is archived and is in readonly mode.

#190 ✓resolved
mike

Fx.Reveal disolve needs this.options.display

Reported by mike | November 19th, 2009 @ 09:48 PM | in 1.2.4.3

The dissolve function has 'block' hard-coded in. This messses up the animation when using "table-row" or something other than block. Here is what is needed in the dissolve function:

dissolve: function(){

    try {
        if (!this.hiding && !this.showing){
            if (this.element.getStyle('display') != 'none'){
                this.hiding = true;
                this.showing = false;
                this.hidden = true;
                this.cssText = this.element.style.cssText;
                var startStyles = this.element.getComputedSize({
                    styles: this.options.styles,
                    mode: this.options.mode
                });
                this.element.setStyle('display', this.options.display);  // << change this 'block' to this.options.display
                if (this.options.transitionOpacity) startStyles.opacity = 1;
                var zero = {};
                $each(startStyles, function(style, name){
                    zero[name] = [style, 0];
                }, this);
                this.element.setStyle('overflow', 'hidden');
                var hideThese = this.options.hideInputs ? this.element.getElements(this.options.hideInputs) : null;
                this.$chain.unshift(function(){
                    if (this.hidden){
                        this.hiding = false;
                        $each(startStyles, function(style, name){
                            startStyles[name] = style;
                        }, this);
                        this.element.style.cssText = this.cssText;
                        this.element.setStyle('display', 'none');
                        if (hideThese) hideThese.setStyle('visibility', 'visible');
                    }
                    this.fireEvent('hide', this.element);
                    this.callChain();
                }.bind(this));
                if (hideThese) hideThese.setStyle('visibility', 'hidden');
                this.start(zero);
            } else {
                this.callChain.delay(10, this);
                this.fireEvent('complete', this.element);
                this.fireEvent('hide', this.element);
            }
        } else if (this.options.link == 'chain'){
            this.chain(this.dissolve.bind(this));
        } else if (this.options.link == 'cancel' && !this.hiding){
            this.cancel();
            this.dissolve();
        }
    } catch(e){
        this.hiding = false;
        this.element.setStyle('display', 'none');
        this.callChain.delay(10, this);
        this.fireEvent('complete', this.element);
        this.fireEvent('hide', this.element);
    }
    return this;
},

Comments and changes to this ticket

  • mike

    mike November 19th, 2009 @ 09:50 PM

    I also see 'block' in the expose function. Not sure if it should be there or not. It's not messing up my animations.

  • jtheory

    jtheory December 19th, 2009 @ 12:56 AM

    • Assigned user set to “Aaron Newton”

    To simplify the fix required: change this line in Fx.Reveal.dissolve():
    this.element.setStyle('display', 'block'); to this:
    this.element.setStyle('display', this.options.display);

    I had to make this change for (as mentioned) revealing table rows.

    I also noticed in Fx.Reveal, in cancel(), a typo that partly breaks the method:
    this line:
    this.hidding = false; should be this:
    this.hiding = false

  • Aaron Newton

    Aaron Newton January 14th, 2010 @ 06:30 PM

    • State changed from “new” to “open”
    • Milestone set to 1.2.4.3
  • Aaron Newton

    Aaron Newton January 28th, 2010 @ 06:35 AM

    • State changed from “open” to “resolved”

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

People watching this ticket

Tags

Pages