Question

我正在为我的项目使用聚合物，我想在用户徘徊时在纸卡上显示阴影，但我似乎无法改变纸卡的提升属性。我怎么能在CSS中做到这一点？另外，我在聚合物元素的doc中看到了animatedShadow属性，其中说

将此设置为true可在设置新z值时为卡片阴影设置动画。

这是什么意思？我无法理解它是如何为阴影设置动画的，或者我如何更改纸卡的z值，这似乎是提升属性，表示

卡片的z深度，从0-5开始。

Answer 1

有几种方法可以实现这一目标。最简单的方法是在悬停时覆盖box-shadow属性。我们可以用纯CSS做到这一点（注意：我从纸张样式GitHub repo中的shadow.html样式表中偷走了这个box-shadow值）：

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-card/paper-card.html" rel="import">

<hoverable-card></hoverable-card>

<dom-module id="hoverable-card">
  <style>
    paper-card:hover {
      box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
                  0 1px 18px 0 rgba(0, 0, 0, 0.12),
                  0 3px 5px -1px rgba(0, 0, 0, 0.4)
    }
  </style>
  
  <template>
    <paper-card>
        Some content
    </paper-card>
  </template>
  
  <script>
    Polymer({
      is: 'hoverable-card',
    });
  </script>
</dom-module>

下一个（更复杂的）方法是使用纸卡的mouseenter和mouseout事件。我们可以注册回调，为卡设置适当的高程：

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-card/paper-card.html" rel="import">

<hoverable-card></hoverable-card>

<dom-module id="hoverable-card">
  <style>
  </style>
  
  <template>
    <paper-card
      animated-shadow
      id="card"
      on-mouseenter="incrementZ"
      on-mouseout="decrementZ">
        Some content
    </paper-card>
  </template>
  
  <script>
    Polymer({
      is: 'hoverable-card',
      
      incrementZ: function() {
        this.$.card.elevation = 5;
      },
      
      decrementZ: function() {
        this.$.card.elevation = 1;
      }
    });
  </script>
</dom-module>

我们还可以访问shadow.html提供的mixins：

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-styles/shadow.html" rel="import">


<hoverable-card></hoverable-card>

<dom-module id="hoverable-card">
  <style>
    paper-card:hover {
      @apply(--shadow-elevation-16dp);
    }
  </style>
  
  <template>
    <paper-card>
        Some content
    </paper-card>
  </template>
  
  <script>
    Polymer({
      is: 'hoverable-card',
    });
  </script>
</dom-module>

无论您如何继续，请尝试将此功能封装在自己的Web组件中！然后你可以随时重复使用它：）

如何更改纸卡的高程属性？

1 个答案: