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元素。然后动画就不起作用了。

我尝试添加一个plunker，但由于某种原因我没有设法让它工作，因为它必须混淆一些必要的导入。有人可以推荐适合聚合物的代码编辑器吗？

是否可以将我的所有代码放在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

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

1 个答案: