高分子材料設計紙陰影觸摸

我在網站上使用Material Design從谷歌和Polymer-Project工作。高分子材料設計紙陰影觸摸

根據谷歌的Surface Response animation guide應該如輕敲對象時提升它在一定時間內，隨着漣漪效應一起。讀Paper-shadow docs我發現animated參數可以設置爲true，以動畫元素z值（深度）的變化。

但是，我怎麼改回爲初始值？我可以設置計時器並重新應用初始值，但這似乎不是解決此問題的有效方法。既然是建議的行爲添加此功能，我認爲它應該以某種方式實現（或者也許是它的方式是什麼？）

有誰知道如何解決這個問題？這裏是當前的代碼：

<link rel="import" href="bower_components/polymer/polymer.html"> 
<link rel="import" href="bower_components/paper-shadow/paper-shadow.html"> 
<link rel="import" href="bower_components/paper-ripple/paper-ripple.html"> 

<polymer-element name="photo-album"> 

    <template> 
     <style> 
      :host{ 
       display: block; 
       position: relative; 
       background-color: white; 
       padding: 20px; 
       width: 200px; 
      } 
      polyfill-next-selector{ content: '.album-header img';} 
      .album-header ::content img{ 
       margin-bottom: 10px; 
      } 
      polyfill-next-selector{ content: '.album-header h2';} 
      .album-header ::content h2{ 
       color: #99182c; 
       font-family: 'RobotoDraft', sans-serif; 
       font-weight: normal; 
       margin: 0; 
      } 
      polyfill-next-selector{ content: '.album-header h3';} 
      .album-header ::content h3{ 
       color: grey; 
       font-size: x-small; 
       font-family: 'RobotoDraft', sans-serif; 
       font-weight: normal; 
       margin: 0; 
      } 
     </style> 

     <paper-shadow z="{{shadowValue}}" animated="true"></paper-shadow> 
     <div class="album-header" vertical layout on-tap="{{albumTapped}}"> 
      <paper-ripple class="recenteringTouch" fit></paper-ripple> 
      <content select="img"></content> 
      <content select="h2"></content> 
      <content select="h3"></content> 
     </div> 

    </template> 

    <script> 
     Polymer('photo-album', { 
      publish:{ 
       shadowValue: 1 
      }, 
      albumTapped: function(event, detail, sender){ 
       this.shadowValue = 3; 
      } 
     }); 
    </script> 

</polymer-element>

來源

2014-07-17 jdepypere

我建議你不要擔心普通的JavaScript與聚合物。執行setTimeout以在輕按後降低卡片對我完全有意義。嘗試是這樣的：

albumTapped: function(event, detail, sender) { 
    if (this.recedeTimeout != null) { 
    clearTimeout(this.recedeTimeout); 
    } 
    this.recedeTimeout = setTimeout(function() { 
    this.shadowValue = 1; 
    this.recedeTimeout = null; 
    }.bind(this), 100); 
    this.shadowValue = 3; 
}

來源

2014-07-17 16:47:39

其實最好的辦法，以動畫紙陰影是這樣的：

<paper-shadow id="paper_shadow" z="1" on-mouseover="{{raise}}" on-mouseout="{{lower}}" animated="true"></paper-shadow> 

raise: function(){ 
     this.$.paper_shadow.setZ('2'); 
     }, 

     lower: function() { 
     this.$.paper_shadow.setZ('1'); 
     }

這應該做提高和降低紙張陰影

的伎倆

來源

2015-05-25 22:15:55

高分子材料設計紙陰影觸摸

回答

相關問題