在加载google-youtube元素之前运行条目动画

Question

聚合物1.0

我有一个自定义元素，其中条目动画在元素完全加载之前开始。这会导致<paper-button>在加载<google-youtube>之前拥有动画，这看起来很有趣。

我认为在加载所有元素之前会触发'iron-overlay-opened' ...在这种情况下，<paper-button>已加载但<google-youtube>未加载。

如何首先完全加载自定义元素，以便正确应用entry动画？

这是使用paper-dialog-behavior元素

<dom-module id="video-player">
  <style>
     :host {
      @apply(--layout-fit);
     }
  </style>


  <template>
    <template is="dom-if" if="{{foo.bar}}">
      <div class="layout vertical fit">
        <google-youtube style="height: 100%"
          video-id="YMWd7QnXY8E"
          rel="1"
          start="1"
          playsinline="0"
          controls="2"
          showinfo="0"
          width="100%"
          height="100%"
          autoplay="1">
        </google-youtube>
      </div>
      <paper-button dialog-dismiss style="color: white; margin-top: 0px">
        <paper-icon-button icon="arrow-back"></paper-icon-button>
      </paper-button>
    </template>
  </template>

  <script>
    Polymer({
      is: "video-player",
      behaviors: [ 
        Polymer.PaperDialogBehavior,
        Polymer.NeonAnimationRunnerBehavior
                 ],
      properties: {
        foo: Object,
        entryAnimation: {
          value: 'scale-up-animation'
        },
        exitAnimation: {
          value: 'fade-out-animation'
        }
      },
      listeners: { 'iron-overlay-opened': 'enableElement',
                   'iron-overlay-closed': 'stopPlayer'
      },
      startPlayer: function() {
        youtubePlayer = this.$$('google-youtube');
        if (youtubePlayer.playbackstarted) {
         youtubePlayer.play();
        }
      },
      enableElement: function(e) {
        this.foo = { bar: true};
        this.playAnimation('entry');
        setTimeout(this.startPlayer.bind(this), 300);
      },
      stopPlayer: function(e) {
        this.playAnimation('exit');
        youtubePlayer = this.$$('google-youtube');
        youtubePlayer.pause();
        youtubePlayer.seekTo(1);
      },
      ready: function() {
        console.log("sssssssssssssssssSS");
       }
    });
  </script>
</dom-module>