PDA

View Full Version : reversing the affect of a 'fade' animation



gkatz
17 Jan 2013, 8:23 AM
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:


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.

AndreaCammarata
18 Jan 2013, 5:21 AM
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



showAnimation: 'fadeIn',
hideAnimation: 'fadeOut'


and simply call the component show() / hide() methods.

gkatz
19 Jan 2013, 11:36 PM
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



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);
}
});

gkatz
28 Jan 2013, 2:06 AM
guys I am still unable to solve this simple issue.
can anyone help?
thanks.

gkatz
28 Jan 2013, 8:53 AM
found a solution.
used:
Ext.getCmp('foo').element.setStyle('opacity', '1');
instead of:
Ext.getCmp('foo').setStyle('opacity:1;');

why is the difference?
thanks.