Hybrid View

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    387
    Vote Rating
    4
    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,394
    Vote Rating
    22
    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
    CEO at SIMACS

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

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    387
    Vote Rating
    4
    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
    387
    Vote Rating
    4
    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
    387
    Vote Rating
    4
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi