Question

在我的应用程序中，我使用<paper-fab>作为后退按钮，如果没有url - 属性集，则隐藏它：

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

隐藏/展示由真正令人惊叹的hidden$="[[!url]]"魔法完成。

我想通过滑入/滑出为隐藏/显示设置动画。

如何通过Polymer-way完成？

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

将聚合物纸张放入和取出

1 个答案: