改变纸厂悬浮的纸张材料高度(聚合物1.0)

Question

我正在尝试在我的Polymer 1.0应用程序中创建一个浮动添加按钮,其功能与Google Inbox的浮动添加按钮非常相似.第一个问题:

为了实现类似的功能,我目前正在使用paper-fab元素onmouseover和onmouseoutjs函数,如下所示:

<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元素的样式.因此,您可以直接在css中更新相同的内容,而不是更新js中的属性(然后设置css).

<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>