PolymerJS：如何正确使用纸质材料

Question

我想在卡片上使用纸质材料的阴影动画，当我使用类似的东西时，它可以工作：

<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元素。 这样动画就无法正常工作。

我尝试添加一个插件，但是由于某种原因，我没有设法使它生效，因为它必须混淆一些必要的输入。 有人可以推荐适合聚合物的代码编辑器吗？

并且可以将我的所有代码放入paper-material元素内吗？

Answer 1

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

<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>

可以使用的插件： http ://plnkr.co/edit/hma9wJrlW4lNrW7Qwi4n?p=preview