PDA

View Full Version : Replacing container contents with nested animation



pbienick
10 May 2012, 8:40 AM
I have a container whose contents change frequently, and I would like to wrap the updating of the contents with some animation code that manipulates the container's opacity. Since the container's animate method seems to be asynchronous, I thought I might be able to do something like this:


var cc = this.getContentContainer();
cc.animate({
to: {
opacity: 0
},
listeners: {
afteranimate: function() {
cc.removeAll();
cc.add(Ext.create('LP.view.form.LoanListForm'));
cc.animate({
to: {
opacity: 1
},
listeners: {
afteranimate: function() {
console.debug('after animate');
}
}
});
}
}
});

Unfortunately, the 2nd animation never happens. I was able to get this to work by using Ext.defer:


var cc = this.getContentContainer();
cc.animate({
to: {
opacity: 0
}
});
Ext.defer(function() {
cc.removeAll();
cc.add(Ext.create('LP.view.form.LoanListForm'));
cc.animate({
to: {
opacity: 1
}
});
}, 250, this);

but this seems rather inelegant compared to the 1st approach. So I guess my question is - should I be able to nest animation calls, or will I have to live with the 2nd approach?