如何更改紙卡的海拔屬性？

Question

我爲我的項目使用聚合物，每當用戶將它拖拽到紙卡上時，我都想顯示一個陰影，但似乎無法更改紙卡的海拔屬性。我怎樣才能在CSS中做到這一點？此外，我在聚合物元素的文檔中看到了動畫陰影屬性

將此設置爲true，以便在設置新的z值時爲卡陰影設置動畫。

這是什麼意思？我無法理解它是如何使陰影動畫的，或者我如何更改紙牌的z值，這似乎是海拔屬性，其狀態爲

卡的z深度從0-5 。

Answer 1

有幾種方法可以完成此操作。最簡單的方法是覆蓋懸停時的box-shadow屬性。我們可以用純CSS做到這一點（注：我從紙張的樣式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提供的混入：

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

不管你如何繼續，嘗試封裝這個功能在它自己的網絡組件內的非凡！那麼你可以重新使用它，只要你願意:)