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:

Code:
    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:

Code:
    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?