1

我正在使用 Google 的Material Design和Polymer-Project在一个网站上工作。

根据 Google 的Surface Response 动画指南，例如，当点击一个对象时，应该将其提升一段时间，以及涟漪效应。阅读Paper-shadow 文档，我发现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>
4

2 回答 2

2

我建议你不要担心在 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;
}
于 2014-07-17T16:47:39.797 回答
0

实际上，动画纸影的最佳方法是这样的：

<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-25T22:15:55.520 回答