PDA

View Full Version : SlideIn Animation



mes-x
3 Jul 2012, 11:02 PM
Hi,

i got a quite beginners question and hopefully you can help me out:

i got two Ext.container.Containers inside a wrapping container configured with the "auto"layout.


+---------------------+
| Container A |
+---------------------+
| |
| Container B |
| |
+---------------------+


Container A should only show itself on sertant conditions. On some event, i wanna use some kind of slideIn animation from the top, but initialy it should be invisible.
It was easy to do in ExtJS 3 but how to do that in ExtJS 4.1?
The challenge is not the sliding in (i do it with ...
container.getEl().slideIn("t")) but to have it initially hidden when the application starts.

I tried to configure Container A with "hidden:true" and use the slideIn, but then nothing happens. It stays hidden. When i call the show() method before sliding it in, then it is shortly visible, disappearing again and then its sliding in.

What is best practice here?
(I would be also awesome if i could still use the automatic height of Container A (Contains some HTML text with icons and some buttons))

Thank you very much for your help!

scottmartin
5 Jul 2012, 1:31 PM
See if this is what you are looking for:



Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',

height: 250,
width: 400,
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'main Panel',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'panel',
title: 'My Panel 2',
itemId: 'panel1',
hidden: true,
flex: 1
},
{
xtype: 'panel',
title: 'My Panel 2',
itemId: 'panel2',
flex: 2
}
]
});

me.callParent(arguments);
}

});

var panel = Ext.create('MyApp.view.MyPanel', {
renderTo: Ext.getBody()
});

pnl1 = panel.down('#panel1');
pnl1.setVisible(true);
pnl1.el.slideIn();


Scott.

corneadoug
12 Apr 2013, 1:31 AM
No it's not working, same problem (showing full component before starting effect)

Real problem is that when we do a SlideIn, we do it on the DomElement and the visibility is changed there.
When we do a SlideIn, it doesn't change our component hidden value.

The hidden should be placed on the DomElement and not the component to see the slideIn working well.
Any way to do that in config options of the Ext.Create?

I even tried a el.slideOut('t', {duration: 1}); and then setVisible(true); el.slideIn(); but we still see the full component before slideIn

mes-x
12 Apr 2013, 11:51 AM
Same problem still here :(

It seems that ExtJS does not support animations very well...

extjs1111_user
27 Jan 2014, 9:32 AM
I too faced the similar problem. got it working through Jquery animation.
Code Snippet


var panel = Ext.getCmp('test'); //initially hidden
$( "#test" ).slideDown(2000); //Jquery function
panel.show();

hhangus
31 Mar 2014, 10:14 AM
I've run into this same exact situation. I want to slide open a panel that is initially unrendered/unshown but if I show it before calling the anim (for example, running the anim in the "show" event) it shows up without the anim followed by the anim. I.e. for a fadeIn, the panel will initially show fully, then blink out to hidden, then fadeIn again.

I ran into soooo many problems trying to make this work, and could not find an online resource that spelled out how to do this properly. I read several resources that suggested the same thing scottmartin did, but this does not work as expected. When the panel is set visible, it immediately becomes visible, and then the animation hides it again in order to do the fadeIn.

It seems like everyone assumes the panel will already be showing, which is odd to me since the use of fadeIn should logically be able to be used before a fadeOut just as easily as after. In any case, I had a very hard time getting this to work (i.e. about 8 hrs of bashing my head on the keyboard) as it isn't made obvious from the documentation or any online resources I could find. Or maybe I'm just slow in the head lol.

I worked around the problem by showing the panel offscreen, then in the show event I move the panel on screen and do the fadeIn. This effectively hides the first showing before the anim runs. To do the hiding, I call the fadeOut with a callback in which I hide the panel so that the panel component is internally set as hidden. Without doing a panel.hide() the next show event won't fire because the panel still thinks it is showing.

IMO, there should be fadeIn/Out functions on the panel as this is pretty common in my experience. The panel version would do the fadeIn/Out on the element but also handle the show/hide of the panel component so everything works as expected.

Here is an example:



Ext.define('HomeApp.view.MenuPanel',{
extend:'Ext.panel.Panel',
width:300,
left:-1000,top:0,
items:[...],
listeners:{
show:function(me){
me.setPosition(0,0);
me.getEl().fadeIn({
endOpacity: 1,
easing: 'easeOut',
duration: 100
});
}
}
,hideMe:function(me){
me.getEl().fadeOut({
endOpacity:0,
easing:'easeIn',
duration:100,
callback:function(){
me.setPosition(-1000,0);
me.hide();//required to allow .show() to be called again.
}
});
}
});
var myPanel = Ext.create('HomeApp.view.MenuPanel');
myPanel.show();
...do stuff...
myPanel.hideMe();