将聚合物纸厂滑入和滑出

Question

在我的应用程序中，我使用 <paper-fab> 作为后退按钮，如果没有 url-属性 set:

则隐藏它

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

Hiding/showing 是由真正令人惊叹的 hidden$="[[!url]]" 魔法完成的。

我想通过滑动 in/out 来为 hiding/showing 设置动画。

如何用 Polymer 方式做到这一点？

Answer 1

您可以根据由属性动态设置的属性使用 CSS transitions。在下面的示例中，按钮切换属性 (_fabVisible)，它绑定到 <paper-fab>.visible 属性：

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

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

神奇之处在于模板的样式，使用 CSS 转换。 CSS 同时淡入并从左侧滑入 <paper-fab>。

<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

将聚合物纸厂滑入和滑出

Slide Polymer paper-fab in and out

polymer

paper-elements

neon-elements