高分子材料设计纸阴影触摸

我在网站上使用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

高分子材料设计纸阴影触摸

回答

相关问题