您如何观察聚合物中元素的宽度？

Question

我想知道如何观察元素的CSS属性（例如宽度）的变化。

我尝试这样做，但是没有用。我哪里做错了？可能吗？

<polymer-element name="test-resize" attributes="elementWidth">
  <template>
    <p>elementWidth : {{elementWidth}}</p>
  </template>
  <script>
    Polymer({
      elementWidth: 100,
      observe: {
        "clientWidth" : "updateWidth",
      },
      updateWidth: function(oldValue, newValue){
        this.elementWidth = newValue;
      }
    });
  </script>
</polymer-element>

在此示例中，我试图观察clientWidth通常可以从外部访问的属性。

Answer 1

有某种技巧会滥用CSS过渡并监听transitionend事件。只有极少数情况是真正需要它的（例如，如果您想以任何方式更改画布尺寸后调整webgl上下文的分辨率）

在CSS中添加转场，以使转场事件在宽度/高度更改时触发。

:host {
  transition:width 0.01s, height 0.01s;
}

聆听事件并处理您想要发生的一切

this.addEventListener("transitionend",function(e){
  this.elementWidth = this.clientWidth;
}) 

有关实施该技术的更多信息，例如您可能需要的polyfills