1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    398
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default reversing the affect of a 'fade' animation

    reversing the affect of a 'fade' animation


    Hi;
    I have a component I need to perform the folloing on:
    1. fade (animation)
    2. show (no animation)
    3. fade again (animation)
    4. show again (no animation)
    looking at the sencha source code it seemed like opacity is the style I should change for the 'no animation' part so I did the following:
    Code:
    Ext.Anim.run(Ext.getCmp('id').element, 'fade', {
            out: true,
            autoClear: false
    });
    Ext.getCmp('id').setStyle('opacity:1;');
    Ext.Anim.run(Ext.getCmp('id').element, 'fade', {
            out: true,
            autoClear: false
    });
    Ext.getCmp('id').setStyle('opacity:1;');
    I executed all 4 changes were done with 2 secs between them...
    the first setStyle('opacity:1;'); worked like a charm but the last one simply does not work and the element stays with opacity 0...
    am I doing something wrong here? I have tried multiple ways of achieving what I described but could not do it.
    your help is appreciated
    thanks.

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    I'm sorry but it's not clear what you are trying to accomplish.
    If you simply want to show / hide a component using the fade animation you can set its

    Code:
    showAnimation: 'fadeIn',
    hideAnimation: 'fadeOut'
    and simply call the component show() / hide() methods.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    398
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    thanks for the tip.however, show and hide are not an option as they affect the layout (and rearrange my page's components).
    I still don't understand why my example does not work. here is the full code - very very simple code.
    you can paste it into new sencha fiddle (http://new.senchafiddle.com) or see the result here http://api.senchafiddle.com/v3/full/BFtgb/ ). as you will see, the last (4th) function will not make the container reappear and I don't understand why.
    thanks

    Code:
    Ext.Loader.setConfig({
        enabled : true
    });
    
    
    Ext.application({
        name : ('SF' || 'SenchaFiddle'),
        
        launch : function() {
            
            Ext.create('Ext.Container', {
                fullscreen : true,
                height:200, width:200,
                style:'background: green;',
                id: 'foo',
                html : 'simple container'
            });
            Ext.Function.defer(function(){
                Ext.Anim.run(Ext.getCmp('foo').element, 'fade', {
                    out: true,
                    autoClear: false
                });
            },2000);
            
            Ext.Function.defer(function(){
                Ext.getCmp('foo').setStyle('opacity:1;');
            },4000);  
            
            Ext.Function.defer(function(){
                Ext.Anim.run(Ext.getCmp('foo').element, 'fade', {
                    out: true,
                    autoClear: false
                });
            },6000); 
            
            Ext.Function.defer(function(){
                Ext.getCmp('foo').setStyle('opacity:1;');
            },8000); 
        }
    });

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    398
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    guys I am still unable to solve this simple issue.
    can anyone help?
    thanks.

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    398
    Vote Rating
    6
    gkatz is on a distinguished road

      0  

    Default


    found a solution.
    used:
    Ext.getCmp('foo').element.setStyle('opacity', '1');
    instead of:
    Ext.getCmp('foo').setStyle('opacity:1;');

    why is the difference?
    thanks.

Thread Participants: 1

Tags for this Thread