Correction, this issue is even on good bandwidth. I think maybe the element/video was cached before. It only happens on the first load, after that issue won't happen on subsequent viewings if element/video is loaded.
On Saturday, July 25, 2015 at 7:56:56 PM UTC-5, Darin Hensley wrote: > > 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/231ad39a-5b9d-4715-b52b-d57dbdd645b7%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
