enyo animating a listItem

Question

I have a 3 listItems and when I click one of them I want the green bar to animate from the right to the left. But it doesn't behave properly.. When you click nothing happens, when you click a second time (optionaly on an other row) thing just get funky. Is there a proper solution for this?

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);

Answer 1

The biggest problem you have here is that the row ceases to have a node after the call to performOnRow(). The extra call to lockRow() isn't necessary since it's locked automatically. If you want this to work you'll need to use a different method after preparing the row or you'll need to cache the node and operate directly on the node. It's possible you could do it with some CSS animations as you would only need the node long enough to set the new value once and let the browser do the animation.

Forgot to add: Nodes are not actually created until the control is rendered. If you want to perform operations only after a node exists, overload rendered().