My core-transition example does not work? - polymer

Question

After reading http://www.polymer-project.org/docs/elements/core-elements.html#core-transition I am trying the following but I am doing something wrong or did not understand it. When I click on my red test square nothing happens except for my console log message?
<link href="components/core-transition/core-transition-css.html" rel="import">
<polymer-element name="story-1">
<template>
<style>
:host {
position:absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
font-family: 'RobotoDraft', sans-serif;
}
#container {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.card {
position: relative;
height: 150px;
width: 150px;
font-size: 50px;
margin: 8px;
background-color: tomato;
border-radius: 4px;
cursor: default;
}
</style>
<div id="container" flex horizontal wrap around-justified layout>
<div class="card" id="animate-me" vertical center center-justified layout on-tap="{{ani}}">
test
</div>
</div>
</template>
<script>
Polymer('story-1', {
ani: function() {
console.log('???')
var target = document.getElementById('animate-me');
var meta = document.createElement('core-meta');
meta.type = 'transition';
transition = meta.byId('core-transition-fade');
transition.go(target, true);
}
});
</script>
</polymer-element>

Answer 1

This is the part I got wrong
<script>
Polymer('story-1', {
ani: function() {
var target = this.$.animate_me;
var meta = document.createElement('core-meta');
meta.type = 'transition';
transition = meta.byId('core-transition-fade');
transition.setup(target);
transition.go(target, true);
}
});
</script>
As far as I can tell from the documentation transition.setup(target, true); is not mentioned in the example. I had to figure that out from the demo source code.
(see https://github.com/Polymer/core-transition/issues/4)