Polymer Core-Animated Pages Transitions

[dpell...@gmail.com]

Hi All:

I seem to fail to understand something fundamental about the core-animated pages. I see really easy to use examples but when I try them in my code they never seem to work.

Here is a demo sample which I want to try to use slide-up and list-cascade transition.

http://beachyogacentre.com/web/polymer/polymer-core-animated-pages/components/core-animated-pages/demos/simple.html

Note : have changed the selector at the top to include Slide Up and in the first slide I have added the following code :

 <div flex class="middle" slide-up list-cascade>
          <p>Option 1</p>
          <p>Option 2</p>
          <p>Option 3</p>
          <p>Option 4</p>
          <p>Option 5</p>
  </div>

I have copied the code from the quiz example here:

https://github.com/Polymer/core-animated-pages/blob/master/demos/quiz1.html

1. Question: 
2. 
   
3. 1. What did I do wrong?
4. 2. How do I understand what to do when the animations dont work, its not very clear because it just doesnt work and the examples seem to only work in the demo pages

Thanks for any enlightenment. 

David