Polymer JS：如何正确使用纸张-material

Question

我想在卡片上使用 paper-material 的阴影动画，当我使用类似这样的东西时，它起作用了：

<template is="dom-bind" id="todoapp">
    <style>
    </style>

    <section on-click="tapAction">
        <paper-material elevation="0" animated>  
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus molestiae quibusdam officiis libero quia ad, unde, assumenda totam soluta modi ullam cumque rem porro tempore ratione doloribus ab delectus optio. Excepturi voluptates mollitia, soluta at, obcaecati magni doloremque aperiam quisquam, esse ipsa voluptas commodi, quis.
        </paper-material>
    </section>
</template>

<script>
    todoapp.tapAction = function (e) {
        var target = e.target;

        if (!target.down) {
            target.elevation += 1;

            if (target.elevation === 1) {
                target.down = true;
            }
        } else {
            target.elevation -= 1;
            if (target.elevation === 0) {
                target.down = false;
            }
        }
    };
</script>

但是一旦我的 paper-material 元素中有另一个元素，它就拒绝工作：

<template is="dom-bind" id="todoapp">
    <style>
    </style>

    <section on-click="tapAction">
        <paper-material elevation="0" animated>  
            <h1>Doesn't work</h1>
        </paper-material>
    </section>
</template>

唯一的区别是我在第二个示例中使用了 h1 元素。然后动画就不行了。

我尝试添加一个 plunker，但出于某种原因我没能成功，因为它一定会混淆一些必要的导入。有人可以推荐适合 polymer 的代码编辑器吗？

是否可以将我所有的代码都放在 paper-material 元素中？

Answer 1

在第一种情况下，目标是 paper-material 元素，在第二种情况下，目标是 h1。您可能希望将 id 分配给纸张 material 元素并对其进行操作。

<template is="dom-bind" id="todoapp">
    <style>
    </style>

    <section on-click="tapAction">
        <paper-material elevation="0" animated id="material">  
            <h1>Doesn't work</h1>
        </paper-material>
    </section>
</template>

并在脚本中

<script>
    todoapp.tapAction = function (e) {
        var target = todoapp.$.material;

        if (!target.down) {
            target.elevation += 1;

            if (target.elevation === 1) {
                target.down = true;
            }
        } else {
            target.elevation -= 1;
            if (target.elevation === 0) {
                target.down = false;
            }
        }
    };
</script>

工作 plunker：http://plnkr.co/edit/hma9wJrlW4lNrW7Qwi4n?p=preview

Polymer JS：如何正确使用纸张-material

PolymerJS: How to properly use paper-material

html

javascript

web-component

polymer