紙カードの標高特性を変更するには？

Question

私は自分のプロジェクトにポリマーを使用しています。ユーザーがいつでもそれを見ることができるように、ペーパーカードに影を表示したいのですが、ペーパーカードの標高特性を変更できないようです。 CSSでどうすればいいですか？また、ポリマー要素のdocにあるanimatedShadowプロパティーを見ました。

新しいz値を設定するときにカードシャドウをアニメーション化するにはtrueに設定します。

この意味は？どのようにして影をアニメーション化するのか、または仰角プロパティのように見える紙カードのz値を変更することはできませんか？

カードのz奥行き、0-5から。

Answer 1

これを達成する方法はいくつかあります。最も簡単な方法は、ホバーのボックスシャドウプロパティをオーバーライドすることです。私たちは純粋なCSSでこれを行うことができます（注：私は紙のスタイルGitHubのレポ内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-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>

次の（より複雑な）方法ペーパーカードのマウスセンターとマウスアウトイベントを使用することです。我々はまた、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-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>

：：私たちは、カードのための適切な高さを設定しますコールバックを登録することができ

<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コンポーネント内のnality！その後、いつでも再利用することができます:)