Question

我发现这个非常好看的Polymer-starter-kit-lite V1.0.1 here。尝试创建自己的页面时，加载页面时会出现一些文本。这是我的：

enter image description here

这是我从github下载的Polymer Starter Kit，它具有平滑的淡化效果：

enter image description here

也许有人知道这是怎么做的！

<!DOCETYPE html>

    <!-- General -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-size=1.0, minimum-size=1.0, user-scalable=no">
    <title>Foodify - Einfach Einkaufen!</title>

    <!-- SEO Tags -->
    <meta name="author" content="Andre Kuhlmann">
    <meta name="page-topic" content="Branche Produkt">
    <meta name="page-type" content="Private Homepage">
    <meta name="audience" content="Alle">
    <meta http-equiv="content-language" content="de">
    <meta name="robots" content="index, follow">
    <!-- Don't forget to place the favicon and the apple-touch-icons -->

    <!-- Chrome ThemeColor for Android -->
    <meta name="theme-color" content="#2ECC71">

    <!-- Web Application Manifest -->
    <link rel="manifest" href="manifest.json">

    <!-- Title Color for Windows 8 -->
    <meta name="msapplication-TintColor" content="#2ECC71">

    <!-- Tile icon for Win8 (144x144) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Polymer Starter Kit">
    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
    <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">

    <!-- build:css css/main.css -->
    <link rel="stylesheet" href="css/main.css">
    <!-- endbuild-->

    <!-- will be replaced with elements/elements.vulcanized.html -->
    <link rel="import" href="elements/elements.html">
    <!-- endreplace-->

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <!-- endbuild -->

</head>

<body fullbleed layout vertical>


    <!-- Drawer -->
    <paper-drawer-panel>‚
        <paper-header-panel drawer mode="seamed">
            <paper-toolbar class="tall green">
                <div horizontal layout end>
                    <div>Menu</div>
                </div>
            </paper-toolbar>

        </paper-header-panel>
        <paper-header-panel main class="main" mode="seamed">
            <paper-toolbar>
                <paper-icon-button icon="menu" tabIndex="1" id="paperToggle" paper-drawer-toggle></paper-icon-button>
                <div class="flex">Foodify</div>
                <paper-icon-button icon="refresh"></paper-icon-button>
                <paper-icon-button icon="search"></paper-icon-button>
            </paper-toolbar>
        </paper-header-panel>
    </paper-drawer-panel>
</body>

谢谢，André

Answer 1

要复制入门工具包在加载时淡入的方式，请通过添加unresolved属性来更改正文，如下所示：

<body class="fullbleed layout vertical" unresolved>
    // ... content here
</body>

来自文档：

元素的unresolved属性用于防止a 在缺乏本机支持的浏览器上闪现无格式内容（FOUC）用于自定义元素。有关详细信息，请参阅Polymer styling reference。

请注意，本文档引用的是0.5版本，但这也适用于1.0版本。

Polymer Page加载问题

1 个答案: