Reputation: 193
My page have several huge <template>
, only will be render and show in any time. But when changing <template>
to render, it takes too long. For example:
<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>
When user clicks button, the ripple of paper shows up but stuck and stay until <template if = "{{render == '#2'}}">
rendered. I've tried to change code to this:
changeRender: function() {
var obj = this;
this.async(function() {
obj.render = '#2';
}, null, 300);
}
It won't stuck now but the time delay is a bit unfriendly to users, does anyone has a better solution? Thanks!
Upvotes: 1
Views: 853
Reputation: 24119
This seems related to https://github.com/Polymer/paper-ripple/issues/10.
One thing you can do is wait for the ripple animation to finish before activating the template:
<paper-button on-core-transitionend="{{changeRender}}"></paper-button>
changeRender: function() {
this.render = '#2';
}
Upvotes: 1