polymer - 在造纸厂悬停时更改纸材高度(Polymer 1.0)

Question

我正在尝试在我的 Polymer 1.0 应用程序中制作一个 float 添加按钮，其功能与 Google Inbox 的 float 添加按钮非常相似。那么第一个问题:

为了实现类似的功能，我目前正在使用 paper-fab 元素和 onmouseover 和 onmouseout js 功能如下:

<paper-fab id="addBtn" icon="add" class="fab red" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)"></paper-fab>

<script>

    hoverOver = function(srcElement) {
        srcElement.querySelector("paper-material").elevation = 4;
    };

    hoverOut = function(srcElement) {
        srcElement.querySelector("paper-material").elevation = 0;
    };

</script>

这是推荐的方法，还是有更巧妙、更“聚合”的方法来实现这一点？

Answer 1

您可以仅使用 css 来实现。

paper-fab::shadow > paper-material {
    @apply(--shadow-none);
}

paper-fab::shadow > paper-material:hover {
    @apply(--shadow-elevation-8dp);
}

在 paper-material 元素的源代码中，您可以看到 elevation 属性只是用于设置 box-shadow 元素上的样式。因此，无需在 js 中更新属性(然后设置 css)，您只需直接在 css 中更新相同的内容即可。 p>

<dom-module id="paper-material">
  <style>
    :host {
      display: block;
      position: relative;
      @apply(--shadow-transition);
    }

    :host([elevation="1"]) {
      @apply(--shadow-elevation-2dp);
    }

    :host([elevation="2"]) {
      @apply(--shadow-elevation-4dp);
    }

    :host([elevation="3"]) {
      @apply(--shadow-elevation-6dp);
    }

    :host([elevation="4"]) {
      @apply(--shadow-elevation-8dp);
    }

    :host([elevation="5"]) {
      @apply(--shadow-elevation-16dp);
    }
  </style>