Right way for a transitions on iron-pages

Question

Hey whats the right way to add a transition to iron-pages? At the moment i just create a custom-element, a "clone" of iron-pages and add the iron-selectable behavior. I use css transitions on the element then:

<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 is working but it feels really bad. What is the common way to add a transitions to iron-pages ?

Chowchow