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/ed75db14-85a5-421f-8faf-f948b95f7a5b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
