Mask fadeIn/fadeOut opacity issue

[jjalonso]

Hello, i have this mask

Ext.define('Mark.view.Waitmask', {
    extend: 'Ext.Mask',
    id: 'waitmask',
    config: {
		tpl: [
		     '<img id="spinner" src="res/spinner.png" />',
		     '<div id="message">{mesage}</div>'
		],
    	showAnimation: {
            type: 'fade',
			duration: 400,
		},
    	hideAnimation: {
            type: 'fadeOut',
			duration: 400,
    	},	    			
		hidden: true    	
    },
    
    initialize: function() {
    	this.superclass.initialize.call(this);
    	this.setData({message:''});
    },
    
    show: function() {
    	this.superclass.show.call(this);
    	this.resume();
    },
    
    resume: function() {
    	Ext.get('spinner').addCls('anim-rotate');
    },
    
    pause: function() {
    	Ext.get('spinner').removeCls('anim-rotate');
    },
    
});

With this CSS in stylesheet.css

.x-mask {
    background: rgba(0, 0, 0, 0.8) center center no-repeat;
    
    & img {
        margin: 0px auto;
        
    }
}

On desktop when i call show() and hide(), the mask fadeIn and Out perfectly,
but on my SE Xperia Arc not fade correctly, the fadeIn flow it is:

1. Start to FadeIn
2. The mask start to fade to black
3. When reach my CSS opacity, the mask continue fading more...
4. Reach opacity 1.0 (OPAQUE)
5. later comeback to the correct opacity setted into stylesheet.
6. FadeIn Completed.

Why the fade reach the 1.0 when this must stop at 0.8!?

Thanks

[mitchellsimoens]

Two things, I don't think the CSS background rule can accept rgba, you should just use rgb and then use the separate opacity rule. Could be wrong with that, just what I remember is the "standard".

Since you have showAnimation with fade type, the fade will make it go to opacity 1 overriding any opacity you have in your CSS. We have the opacity set to 1 hardcoded.

If you have you mask like this:

Ext.define('Mark.view.Waitmask', {
    extend : 'Ext.Mask',
    xtype  : 'waitmask',

    config : {
        tpl           : [
            '<img id="spinner" src="res/spinner.png" />',
            '<div id="message">{mesage}</div>'
        ],
        showAnimation : {
            type     : 'fade',
            duration : 1000,
            after    : {
                opacity : 0.5
            }
        },
        hideAnimation : {
            type     : 'fadeOut',
            duration : 400
        },
        hidden        : true
    },

    initialize : function () {
        this.superclass.initialize.call(this);
        this.setData({message : ''});
    },

    show : function () {
        this.superclass.show.call(this);
        this.resume();
    },

    resume : function () {
        Ext.get('spinner').addCls('anim-rotate');
    },

    pause : function () {
        Ext.get('spinner').removeCls('anim-rotate');
    }
});

Then you can use this override to allow it to use the after and before configs

Ext.define('Override.fx.animation.Fade', {
    override : 'Ext.fx.animation.Fade',

    updateOut : function (newOut) {
        var to         = this.getTo(),
            from       = this.getFrom(),
            before     = this.getBefore(),
            beforeOpac = before.data.opacity,
            after      = this.getAfter(),
            afterOpac  = after.data.opacity;

        if (newOut) {
            from.set('opacity', beforeOpac || 1);
            to.set('opacity',   afterOpac  || 0);
        } else {
            from.set('opacity', beforeOpac || 0);
            to.set('opacity',   afterOpac  || 1);
        }
    }
});