Question

单击红色方块并查看控制台日志输出

如何摆脱这个setTimeout 500黑客以获得正确的100％图像宽度？

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <title>Jsbin</title>

  <script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
  <link href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-animated-pages/transitions/cross-fade.html" rel="import">
  <link href="https://www.polymer-project.org/components/core-animated-pages/transitions/slide-from-right.html" rel="import">
  <link rel="import" href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
  <link rel="import" href="https://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
  <link rel="import" href="https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html">
  <link rel="import" href="https://www.polymer-project.org/components/font-roboto/roboto.html">

  <style>
    body {
      font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
  </style>
</head>

<body unresolved>

  <polymer-element name="to-soon" attributes="activePage">
    <template>
      <img src="http://sea-is-snow.appspot.com/icon/loading.gif" style="width:100%">
      <span style="color:green; position:fixed; bottom:0px; right:0px; z-index:1;">TO SOON</span>
    </template>
    <script>
      Polymer({
        activePageChanged: function() {
          if (this.activePage != 1) return 0
          console.log(this.shadowRoot.querySelector('img').width)
          setTimeout(function() {
            console.log(this.shadowRoot.querySelector('img').width)
          }.bind(this), 500);
        },
      });
    </script>
  </polymer-element>


  <template is="auto-binding" unresolved>

    <core-drawer-panel rightDrawer>

      <core-header-panel main>
        <core-toolbar class="core-header">
          <select onchange="change();">
            <option value="cross-fade-all" selected>cross-fade-all</option>
            <option value="slide-from-right">slide-from-right</option>
          </select>
        </core-toolbar>
        <core-animated-pages selected={{activePage}} class="content" onclick="stuff();" transitions="cross-fade-all" fit relative>
          <section>
            <div layout vertical center center-justified style="background:red;" fit>1</div>
          </section>
          <section>
            <to-soon activePage={{activePage}}></to-soon>
          </section>
        </core-animated-pages>
      </core-header-panel>

      <core-header-panel drawer style="background:#eee; overflow:auto;">
        <core-toolbar class="core-header">Hello</core-toolbar>
        <div class="content">world</div>
      </core-header-panel>

    </core-drawer-panel>

  </template>

  <script>
    function change() {
      var s = document.querySelector('select');
      document.querySelector('core-animated-pages').transitions = document.querySelector('select').options[s.selectedIndex].value;
    }

    var up = true;
    var max = 1;

    function stuff() {
      var p = document.querySelector('core-animated-pages');
      if (up && p.selected === max || !up && p.selected === 0) {
        up = !up;
      }
      if (up) {
        p.selected += 1;
      } else {
        p.selected -= 1;
      }
    }
  </script>

</body>

</html>

Answer 1

  Polymer({
    ready: function() {
      addEventListener('core-animated-pages-transition-end', function () {
        console.log(this.shadowRoot.querySelector('img').width)
      }.bind(this));
    },
  });

上面的函数在这个plunkr中为我返回正确的宽度。

http://plnkr.co/edit/RGldJcDgn3TzlNIRg0n0?p=preview

img宽度100％事件

1 个答案: