UPDATE: This issue is not noticeable if bandwith is good and <google-youtube> loads quickly. But if connection is slow, such at a coffee shop, then the issue is noticeable.
On Saturday, July 25, 2015 at 4:54:24 PM UTC-5, Darin Hensley wrote: > > stackoverflow cross post > <http://stackoverflow.com/questions/31631500/entry-animation-runs-before-google-youtube-element-is-loaded> > > > *Polymer 1.0* > > I have a custom element where the entry animation starts before the > element is completely loaded. This causes the `<paper-button>` to have the > animation before `<google-youtube>` is loaded, which looks funny. > > I think the `'iron-overlay-opened'` is fired before all the elements are > loaded...in this case the `<paper-button>` is loaded but the > `<google-youtube>` is not. > > How can I make it to where the custom element loads completely first so > the `entry` animation is applied correctly? > > *This is using `paper-dialog-behavior` element* > > > <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> > > > > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/909d6527-98a0-408e-9ed1-a23f4fff732b%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
