Im trying to customize the ChipToCard Effect from Polymers
core-animated-pages. (
https://www.polymer-project.org/0.5/components/core-animated-pages/demos/music.html
)
My Idea is that the "chip-top" div contains a image and there is some text
in the "chip-bottom" just like in the example.
My Problem now is that if I put the image just into it it looks weird when
transforming because the image gets stretched during the animation.
I have played around a lot now but i cant get a solution that is
satisfying.
<section style="overflow:scroll; overflow-x: hidden;">
<div class="chip-container" horizontal around-justified layout>
<div layout vertical>
<template repeat="{{resp[0] as item}}">
<div class="chip" >
<div self class="chip-top" hero-id="{{
item.pk }}-art" hero>
<img
src="/upload/{{item.fields.image}}" />
</div>
<div class="chip-bottom"
hero-id="{{ item.pk }}-text" hero>
<div class="chip-title1" >{{
item.fields.headline1 }}</div>
<div class="chip-title2" >{{
item.fields.headline2 }}</div>
</div>
</div>
</template>
</div>
</div>
</section>
<section style="overflow-y:scroll; overflow-x: hidden;" id="details"
on-tap="{{albumTapped}}">
<wth-header hero cross-fade></wth-header>
<div class="card" layout horizontal cross-fade>
<div class="card-left" hero-id="{{ post.pk
}}-art" hero>
<div class="grid" >
<figure class="effect-bubba">
<img
src="/upload/{{post.fields.image}}" on-tap="{{null}}" />
<figcaption>
<h2>Namesdfsdg
<span>Surename</span></h2><br/>
<p>kashdkjahf asjhdg difug </p>
</figcaption>
</figure>
</div>
</div>
<div flex class="card-right" hero-id="{{
post.pk }}-text" hero>
<div layout vertical>
<div class="card-title1">
{{post.fields.headline1}}
</div>
<div class="card-title2">
{{post.fields.headline2}}
</div>
<div layout horizontal center>
<div flex>
<div class="card-album-title"
><a href="{{post.fields.link1}}">{{post.fields.link1_name}}</a></div>
</div>
</div>
<div layout horizontal center>
<div flex>
<div
class="card-album-title"><a
href="{{post.fields.link2}}">{{post.fields.link2_name}}</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
with this solution i prevent the image from getting stretched but the
effect of chip to card is missing now.
Does someone have some knowledge about the hero-transition effect cause i
cant get any documentation from polymer itself about that problem.
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/3875bb0e-9018-4522-ba97-340828ab7741%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
