Question

我试图在我的Polymer 1.0应用程序中创建浮动添加按钮，其功能与Google Inbox的浮动添加按钮非常相似。第一个问题：

为了实现类似功能，我目前正在使用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>

这是推荐的方法，还是有更多的，更多的聚合＆＃39;完成这个的方法？

Answer 1

You can achieve this by using css only.

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

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

In the source code of the paper-material element, you can see that the elevation attribute is just for setting the the box-shadow style on the element. So instead of updating the attribute in js (which then sets the css), you can simply update the same thing directly in 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>

Answer 2

或者，如果您想使用html，请确保纸质材料具有属性＆＃34;动画＆＃34;设置为＆＃34; true＆＃34;

Answer 3

另一个解决方法是将<style>直接放在element.html的dom-module中

 paper-button:hover{
        @apply(--shadow-elevation-6dp);
    }

可能会更改dp以进行提升。希望帮助

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

3 个答案: