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';
}

Polymer如何在不影响与用户交互的情况下呈现<template>异步</template>

1 个答案: