如何改变纸卡的高度属性？

Question

我正在为我的项目使用聚合物，我想在用户将鼠标悬停在纸卡上时显示阴影，但我似乎无法更改纸卡的高度属性。我怎样才能在 CSS 中做到这一点？另外，我在 polymer elements 的文档中看到了 animatedShadow 属性，上面写着

Set this to true to animate the card shadow when setting a new z value.

这是什么意思？我不明白它是如何为阴影设置动画的，或者我如何更改纸卡的 z 值，它似乎是海拔属性，它表示

The z-depth of the card, from 0-5.

Answer 1

您可以通过多种方式完成此操作。最简单的方法是在悬停时覆盖 box-shadow 属性。我们可以使用纯 CSS 来做到这一点（注意：我从 paper-styles GitHub 存储库中的 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 组件中！然后你可以随时重复使用它:)

如何改变纸卡的高度属性？

How to change elevation property of paper-card?

css

polymer

paper-elements