你如何观察聚合物中元素的宽度？ [英] How do you observe the width of an element in polymer?

问题描述

我想知道如何观察元素的css属性的变化，例如宽度。

我试过这样做，但它没有工作。我哪里做错了？可能吗？

 < polymer-element name =test-resizeattributes =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

有一种技术是滥用CSS转换和侦听的方法，它可以从外部正常访问。

解决方案

transitionend事件。只有极少数情况下它是真正需要的（例如，如果你想在任何方式改变canvas尺寸后调整webgl上下文的分辨率）

添加一个

 ：host {
 transition：width 0.01 s，高度0.01s; 
} 
  

聆听活动并处理您想要的活动

  this.addEventListener（transitionend，function（e）{
 this.elementWidth = this.clientWidth; 
}） 
  

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

I was wondering how it is possible to observe changes to an element's css property such as the width.

I tried doing this but it didn't work. Where did I go wrong? Is it possible?

<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>

In this example, I'm trying to observe the clientWidth property which you can normally access from outside.

解决方案

There is a certain technique abusing CSS transitions and listening for the transitionend event. There are only a very few cases where it's really required (like if you want to adjust the resolution of a webgl context after the canvas dimensions changed in any way)

Add a transition in css to make the transition event fire when width/height change.

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

Listen for the event and handle whatever you want to happen

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

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

这篇关于你如何观察聚合物中元素的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！