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