Question

我有一个3个listItems，当我点击其中一个时，我希望绿色条从右到左动画。但它没有正常运行..当你点击没有任何反应时，当你第二次点击（选择性地在另一行）时，事情就变得时髦了。对此有适当的解决方案吗？

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()。

enyo动画listItem

1 个答案: