聚合物如何渲染<template>而不影響與用戶的交互

Question

我的頁面有幾個巨大的<template>，只有在任何時候纔會渲染和顯示。但是當更改<template>進行渲染時，它需要很長時間。例如：

<polymer-element name = "my-element"> 
    <template> 
    <template if = "{{render == '#1'}}"> 
     <!--Many elements, takes long time to render--> 
    </template> 
    <template if = "{{render == '#2'}}"> 
     <!--Many elements, takes very long time to render--> 
    </template> 
    <paper-button on-click = "{{changeRender}}"></paper-button> 
    </template> 
    <script> 
    Polymer({ 
     render: '#1', 
     changeRender: function() { 
     this.render = '#2'; 
    } 
    }); 
</script> 
</polymer-element> 

當用戶點擊按鈕時，紙張的紋波顯示出來，但被卡住，一直呆到渲染<template if = "{{render == '#2'}}">。我試圖改變代碼如下：

changeRender: function() { 
    var obj = this; 
    this.async(function() { 
    obj.render = '#2'; 
    }, null, 300); 
} 

它現在不會卡住，但延遲時間是有點不友好的用戶，沒有任何人有一個更好的解決方案？謝謝！

Answer 1

這似乎與https://github.com/Polymer/paper-ripple/issues/10有關。

一兩件事你可以做的就是等待紋波動畫激活模板之前完成：

<paper-button on-core-transitionend="{{changeRender}}"></paper-button> 

changeRender: function() { 
    this.render = '#2'; 
}