2

我使用 dart-polymer 包来创建自定义元素。我注意到在加载自定义元素的页面期间有一些闪烁。这种效果对于非常简单的 ClickCounter 应用程序也是可见的。有什么办法可以避免这种令人烦恼的眨眼吗？

维基百科http://en.wikipedia.org/wiki/Flash_of_unstyled_content很好地描述了这个问题

http://www.polymer-project.org/docs/polymer/styling.html#fouc-prevention建议的解决方案不适用于简单的应用程序（聚合物：'0.10.0-pre.2'）..

<html>
  <head>
    <title>Click Counter</title>

    <!-- import the click-counter -->
    <link rel="import" href="packages/polymer/polymer.html">
    <link rel="import" href="clickcounter.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
    <body unresolved>
    <h1>CC</h1>

    <p>Hello world from Dart!</p>

    <div id="sample_container_id">
      <click-counter count="5"></click-counter>
    </div>

  </body>
</html>

<polymer-element name="click-counter" attributes="count">
  <template>
    <style>
      div {
        font-size: 24pt;
        text-align: center;
        margin-top: 140px;
      }
      button {
        font-size: 24pt;
        margin-bottom: 20px;
      }
    </style>
    <div>
      <button on-click="{{increment}}">Click me</button><br>
      <span>(click count: {{count}})</span>
    </div>
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';

/**
 * A Polymer click counter element.
 */
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  @published int count = 0;

  ClickCounter.created() : super.created() {
  }

  void increment() {
    count++;
  }
}

另请参阅 code.google.com https://code.google.com/p/dart/issues/detail?id=17498中创建的问题

4

1 回答 1

1

Polymer 0.9.5
要使用的类名是polymer-veiled（隐藏的）和polymer-unveil（在揭开过渡期间）如果它与 Polymer.js 中的不同，它可能会发生变化，但从 PolymerDart 0.9.0 开始它应该可以工作。

相关代码在packages/polymer/src/boot.dart.

聚合物 0.10.0
聚合物 0.10.0-pre.1 已经使用了unresolved此处解释的属性
聚合物 - 样式参考 - FOUC 预防

您需要添加版本约束pubspec.yaml才能获得开发版本，例如
polymer: ">=0.10.0-pre.1"

于 2014-03-15T10:06:43.770 回答