list - listItem をアニメーション化する enyo

Question

3 つの listItems があり、そのうちの 1 つをクリックすると、緑色のバーが右から左にアニメーション化されます。しかし、それは適切に動作しません..クリックしても何も起こりません.2回目（オプションで別の行）をクリックすると、ファンキーになります。これに対する適切な解決策はありますか？

http://jsfiddle.net/joopmicroop/6GJs4/

enyo.kind({
    name:'main',
    classes: "enyo-fit",
    components:[ 
        {name:'list', kind:'enyo.List', count:'3', onSetupItem:'itemSetup', components:[
            {name:'listItem', kind:'listItem', ontap:'itemTapped'},    
        ]}, 
    ],
    itemTapped:function(s,e){
        console.log('itemTapped',e.rowIndex);
        this.$.list.prepareRow(e.rowIndex);
        this.$.list.performOnRow(e.rowIndex, function(){ this.animate(); }, this.$.listItem);
        this.$.list.lockRow();
        this.$.list.renderRow(e.rowIndex);
    },
    itemSetup:function(s,e){ this.$.listItem.setText('item'+e.index); }
});

enyo.kind({
    name:'listItem',
    classes:'listItem',
    published:{text:''},
    create:function(){
        this.inherited(arguments);
        this.animator = new enyo.Animator({
            onStep:enyo.bind(this, function(animObj){
                this.$.backBar.applyStyle('width',animObj.value+'%');
            }),duration:1000
        });
    },
    components:[
        {name:'backBar', classes:'animBar'},
        {name:'itemContent', content:''},
    ],
    animate:function(){
        if(!this.animator.isAnimating()) this.animator.play({startValue:10, endValue:100});
    },
    textChanged:function(oldVal){ this.$.itemContent.setContent(this.text); },
});

(new main()).renderInto(document.body);