聚合物材料设计纸影触摸答案

【问题标题】：Polymer Material Design paper-shadow on touch聚合物材料设计纸影触摸
【发布时间】：2014-07-17 16:23:25
【问题描述】：

我正在使用来自 Google 的 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>

【问题讨论】：

标签： shadow polymer material-design

【解决方案1】：

我建议您不要担心在 Polymer 中使用普通的 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;
}

【讨论】：

【解决方案2】：

实际上，为纸影制作动画的最佳方式是这样的：

<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');
      }

这应该可以提高和降低纸张阴影

【讨论】：