enyo为listItem设置动画

Question

我有一个3的listItems，当我单击其中一个时，我希望绿色条从右到左显示动画。但它的行为并不正常。当你点击的时候什么都没有发生，当你第二次点击(可选的在另一行)时，事情就变得时髦起来。对此有合适的解决方案吗？

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

这里遇到的最大问题是，在调用performOnRow()之后，该行不再有节点。不需要额外调用lockRow()，因为它是自动锁定的。如果希望这样做，则需要在准备好行之后使用不同的方法，或者需要缓存节点并直接在节点上操作。您可以使用一些CSS动画来完成此操作，因为您只需要足够长的时间来设置新值一次，然后让浏览器执行动画。

忘记添加:在呈现控件之前，不会实际创建节点。如果只想在节点存在后执行操作，请重载rendered()。