Create a card with wave in Polymer - polymer

Question

I try to learn Polymer and until now, I think I am in a good way. However, I found a framework which has the same Google Material Design and I am trying to implement on of their tutorials to Polymer code.
The framework is: http://materializecss.com/ and the component I try to implement is the Card reveal
I have the code of how it should be on materializecss
<div class="col l4 m4 s1">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="responsive-img" src="/static/images/myimage.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Training Estimation <i class="mdi-navigation-more-vert right"></i></span>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title <i class="mdi-navigation-close right"></i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
However, I don't know how to start and rewrite the same feature on Polymer directly.

Answer 1

Can be done using polymer core-animated-pages.
Demo and the code: https://github.com/DinethH/card-reveal
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="../../bower_components/font-roboto/roboto.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../../bower_components/core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../../bower_components/core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../../bower_components/core-animated-pages/transitions/cross-fade.html">
<polymer-element name="card-reveal" center layout>
<template>
<style>
paper-shadow,
core-animated-pages section {
height: 500px;
width: 500px;
}
core-animated-pages section {
overflow: hidden;
}
h3 {
font-weight: 300;
font-size: 26px;
margin: 0;
padding: 0;
padding-bottom: 10px;
}
.card-content,
.card-reveal {
padding: 20px;
background: white;
height: 500px;
}
a {
color: orange;
text-transform: uppercase;
}
</style>
<paper-shadow>
<core-animated-pages transitions="slide-up" selected="{{selected}}">
<section>
<div>
<img src="http://lorempixel.com/500/380/">
<div>
<div class="card-content">
<div layout horizontal>
<div flex>
<h3>{{item.title}}</h3>
</div>
<div>
<paper-icon-button on-tap="{{reveal}}" icon="more-vert"></paper-icon-button>
</div>
</div>
<a>This is a link</a>
</div>
</div>
</div>
</section>
<section>
<div class="card-reveal" slide-up cross-fade>
<div layout horizontal>
<div flex>
<h3>{{item.title}}</h3>
</div>
<div>
<paper-icon-button on-tap="{{reveal}}" icon="close"></paper-icon-button>
</div>
</div>
<div>
{{item.more}}
</div>
</div>
</section>
</core-animated-pages>
</paper-shadow>
</template>
<script>
Polymer({
created: function () {
this.item = {
title: "Card Title",
more: "Here is some more information about this product that is only revealed once clicked on."
};
},
reveal: function () {
if (this.selected == 0) {
this.selected = 1;
} else {
this.selected = 0;
}
}
});
</script>
</polymer-element>