0

我有 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);
4

1 回答 1

0

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

忘了补充：直到控件被渲染，节点才真正被创建。如果只想在节点存在后执行操作，请重载rendered()。

于 2013-07-04T17:39:29.527 回答