Poly hero transition in custom element
I am using Polymer for a new release on my website. I am currently experimenting with hero transition core-animated-pages
. Some examples are presented in the examplescore-animated-pages
and especially this one .
In these examples, I have to understand the examples, and I came to this example: jsbin . It is not fully polished, but it works.
Now I want the map view to be customizable in this example. From this custom element, I need two hero-id
, one for the image and one for the album title. I tried to simulate it in this example . Here's the code:
custom album card element
<polymer-element name="album-card">
<template>
<style>
:host{
display: block;
position: relative;
background-color: grey;
width: 200px;
}
.description{
padding: 0px 10px;
color: white;
}
.cube{
width: 200px;
height: 200px;
}
</style>
<div vertical layout>
<div class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div>
<div class="description">
<content select="h2" hero-id="title-hero" hero></content>
<content select="h4"></content>
</div>
</div>
</template>
<script>
Polymer("album-card", {});
</script>
</polymer-element>
The main element in which the transition appears
<polymer-element name="my-app">
<template>
<style>
</style>
<core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}">
<section>
<album-card>
<h2>Album name</h2>
<h4>x pictures</h4>
</album-card>
</section>
<section>
<core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero>
<div class="title bottom" hero hero-id="title-hero">Album name</div>
</core-toolbar>
</section>
</core-animated-pages>
</template>
<script>
Polymer("my-app", {
photopage: 0,
albumTapped: function(){
this.photopage++;
}
});
</script>
</polymer-element>
Now I know this has to do with the shadow dom where the attributes hero-id
and hero
fields are set, so they are not available to other elements on the page, but is there a way to get around this in this particular case?
source to share
This is not actually a shadow dom. animated goes for the hero "1 shadow-dom of depth" and cross-fades any shadow-depth.
The point is that your custom landscape map was getting all the "snap" before the ready callback and popping.
Just like you selected the album of your choice, somehow messed up (at least what I am drawing) so with your code ( and I have to leave the office now ). I'm home, happily editing my answer and awesome stuff) I made it work in reverse back and forth as such: your fixed code (updated 2)
I wish I could play with him anymore, because I really have to leave. I may come back later and explain it better, but at least the answer is "TL; DR" here: you shouldn't bind things before the ready callback (actually you can, but it's specific, and should be explicitly declared on elemental prototype). I will probably come back here later (here I am). Hope it helps.
ADDENDUM: and I didn't notice at the time (I was in a hurry), you nested your element in a section with custom elements that are not needed (and not expected by the component in this case).
complete code for ease of copy / paste:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src='http://www.polymer-project.org/webcomponents.js'></script>
<link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'>
<link rel='import' href='http://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html'>
<link rel='import' href='http://www.polymer-project.org/components/core-toolbar/core-toolbar.html'></head>
<body>
<!-- your album card element -->
<polymer-element name="album-card" noscript>
<template>
<style>
#thumbAlbum{
display: block;
background-color: grey;
width: 200px;
}
#albumDesc{
padding: 0px 10px;
color: white;
}
#albumCover{
width: 200px;
height: 200px;
}
</style>
<div id="thumbAlbum" vertical layout>
<div id="albumCover" class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div>
<div id="albumDesc" class="description">
<content select="h2" hero-id="title-hero" hero></content>
<content select="h4"></content>
</div>
</div>
</template>
</polymer-element>
<!-- your app alement -->
<polymer-element name="my-app">
<template>
<core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}">
<album-card>
<h2>Album name</h2>
<h4>x pictures</h4>
</album-card>
<section>
<core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero>
<div class="title bottom" hero hero-id="title-hero">Album name</div>
</core-toolbar>
</section>
</core-animated-pages>
</template>
<script>
Polymer("my-app", {
photopage: 0,
ready:function(){
},
albumTapped: function(){
this.photopage = this.photopage > 0 ? 0 : 1;
},
});
</script>
</polymer-element>
<my-app></my-app>
</body>
</html>
Oh, and on an important pass: always use webcomponents.js as platform.js is outdated and not very friendly to find out about issues. plus import the polymer.html file.
source to share
It actually works if you just remove the element album-card
from the element section
: http://jsbin.com/botoxaneju/1/edit?html,output
I'm not really sure why this is because I am experiencing the same problem.
source to share