Question

我的霓虹动画页面不会显示在我的纸质材料中。

在这里你可以看到我的霓虹灯动画页面不会显示在纸质材料中。纸质材料以红色边框勾勒出轮廓。理论上，纸质材料应具有底部边框，并且沿着右侧和左侧的边界也包含蓝色div。我最好的猜测是，在neon-animated-pages元素本身中，它是一个CSS规则，它覆盖了正确的行为。任何帮助将不胜感激，提前谢谢。

简单的代码exapmle：

    <!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
        <link rel="import" href="bower_components/neon-animation/neon-animation.html">
        <link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
        <link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html">

        <link rel="import" href="bower_components/paper-material/paper-material.html" >
        <style>
        </style>

    </head>

    <body fullbleed unresolved vertical>
        <test-iron-page></test-iron-page>
    </body>

<dom-module id="test-iron-page">
    <style is="custom-style">


        p {
            font-size: 5em;
            margin: 0px;
        }

        paper-material {
            margin: 0px;
            border: 1px red solid;
        }

        .bigDiv {
            background: rgb(0, 148, 255);
            height: 150px;
        }

        .smallDiv {
            background: rgb(0, 255, 144);
            height: 40px;
        }
    </style>

    <template>

        <paper-material elevation="2">

            <div id="headerCont">
                <p>Header</p>
            </div>
            <neon-animated-pages id="nap" selected="0">
                <div class="bigDiv">I am a div</div>
                <div class="smallDiv">I am a div</div>
            </neon-animated-pages>

        </paper-material>

    </template>

</dom-module>

<script>
    Polymer({
        is: "test-iron-page"
    });
</script>

</html>

Answer 1

指定height的{{1}}，以下是paper-material height:300px;的工作演示。

paper-material

霓虹动画页面不在纸质材料中

1 个答案: