Hey, what's the right way to add a transition to iron pages? At the moment, I am just creating a custom element, a “clone” of iron pages and adding behavior chosen by the iron. I use css transitions for an element:
<link rel="import" href="bower_components/polymer/polymer-element.html"> <link rel="import" href="bower_components/iron-selector/iron-selectable.html"> <dom-module id="envo-pages"> <template> <style> :host { display: block; position: relative; overflow: hidden; } :host > ::slotted(*) { background: #f1f1f1; position: absolute; top:0; left:0; width: inherit; height: inherit; transform: translateY(-100%); transition: all .5s ease-in-out; } :host > ::slotted(.iron-selected) { transform: translateY(0); } </style> <slot></slot> </template> <script> /** * `envo-pages` * * * @customElement * @polymer * @demo demo/index.html */ class EnvoPages extends Polymer.mixinBehaviors([Polymer.IronSelectableBehavior], Polymer.Element) { static get is() { return 'envo-pages'; } constructor(){ super() } connectedCallback() { super.connectedCallback() } } window.customElements.define(EnvoPages.is, EnvoPages); </script> </dom-module>
It works, but it feels really bad. What is the general way to add transitions to iron pages?
source share