Question

我正在使用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>

Answer 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;
}

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

这应该可以起到提高和降低纸张阴影的作用

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

2 个答案: