javascript - 你如何观察 polymer 中元素的宽度？

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 事件。只有极少数情况下才真正需要它(例如，如果您想在 Canvas 尺寸以任何方式发生变化后调整 webgl 上下文的分辨率)

在 css 中添加一个过渡，使过渡事件在宽度/高度变化时触发。

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

监听事件并处理任何你想发生的事情

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

more info about implementing the technique, like polyfills you'll probably need