Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    24
    Vote Rating
    0
    jjalonso is on a distinguished road

      0  

    Default Mask fadeIn/fadeOut opacity issue

    Mask fadeIn/fadeOut opacity issue


    Hello, i have this mask



    Code:
    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

    Code:
    .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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    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

    Code:
    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);
            }
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread