正确的铁页转换方式

Question

嘿，有什么方法可以添加到铁页的转换？目前我只是创建一个自定义元素，一个＆＃34;克隆＆＃34;铁页和添加铁选择行为。我在元素上使用css过渡：

<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>

它正在工作，但感觉非常糟糕。添加过渡到铁页的常用方法是什么？