CODEWITHSUNDEEP
polymerpaper-elementsneon-elements
yglodt
yglodt

Reputation: 14551

Slide Polymer paper-fab in and out

In my application, I use a <paper-fab> as a back-button, and hide it if there is no url-property set:

<paper-fab icon="arrow-back" on-tap="goToUrl" hidden$="[[!url]]"></paper-fab>

Hiding/showing is done by the truly amazing hidden$="[[!url]]" magic.

I would like to animate the hiding/showing by sliding in/out.

How could that be done the Polymer-way?

Upvotes: 1

Views: 231

Answers (1)

tony19
tony19

Reputation: 138286

You could use CSS transitions based on an attribute, which is set dynamically by a property. In the following example, the button toggles a property (_fabVisible), which is bound to the <paper-fab>.visible attribute:

<paper-fab visible$="[[_fabVisible]]" label="+"></paper-fab>
<button on-click="_toggleFab">Toggle</button>

// script
_toggleFab: function() {
  this._fabVisible = !this._fabVisible;
}

The magic happens in the template's style, using CSS transitions. The CSS simultaneously fades in and slides in the <paper-fab> from the left.

<style>
  paper-fab {
    opacity: 0;
    left: -100px;
    transition: opacity 0.6s ease-in-out, left 0.3s ease-in-out;
  }

  paper-fab[visible] {
    opacity: 1;
    left: 0;
  }
</style>


HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _toggleFab: function() {
      this._fabVisible = !this._fabVisible;
    }
  });
});
<head>
  <base href="https://polygit.org/polymer+1.8.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-fab/paper-fab.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-fab {
          opacity: 0;
          left: -100px;
          transition: opacity 0.6s ease-in-out, left 0.3s ease-in-out;
        }

        paper-fab[visible] {
          opacity: 1;
          left: 0;
        }
      </style>

      <button on-click="_toggleFab">Toggle FAB</button>
      <paper-fab label="+" visible$="[[_fabVisible]]"></paper-fab>
    </template>
  </dom-module>
</body>

codepen

Upvotes: 2

Related Questions