PDA

View Full Version : animate initial display of a component?



kevin.forbes
14 Jan 2014, 1:18 PM
I have a floating component. I want to perform a 'slideIn' to display it when it is created. I can't figure out how to create the instance so that it's hidden initially and then perform a 'slideIn' to show it.

As far as I can tell, a 'slideIn' will not undo a 'hide' and I can't find a way to run an animation during a 'show'. So I can set the component to be 'hidden' initially but then I can't figure out how to run a 'slideIn'. Everything I've tried so far either results in the component not appearing at all or quickly appearing and then the 'slideIn' effect plays. This causes a flicker which I'm trying to avoid.

How do you animate the initial display of a component?

kevin.forbes
14 Jan 2014, 1:28 PM
This is the best I've done so far but it feels like a hack and causes a flicker before the 'slideIn' plays:


var myComp = Ext.create('MyComponent', {
border: false,
floating: true,
shadow: false,
listeners: {
afterrender: function(component, eOpts) {
component.el.slideOut('t', {duration: 0});
}
}
});
myComp.el.slideIn('t', { duration: 500 });

kevin.forbes
15 Jan 2014, 12:13 PM
Unless someone can find a better solution, this hack solution actually plays the animation without first flickering the full component:


var myComp = Ext.create('MyComponent', {
y: -500,
floating: true,
listeners: {
render: function(component, eOpts) {
component.el.slideOut('t', {
duration: 0,
callback: function() {
component.setPosition(0, 0);
component.el.slideIn('t', { duration: 500 });
}
});
}
}
});

Basically, render the component off-screen somewhere. Play the 'slideOut' effect. Once the effect finishes, move the component where you actually want it (may not be 0,0). After moving, play the 'slideIn' effect.

There has got to be a better way than this.