Home | History | Annotate | Download | only in tiles 
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
      9 -->
     10 <link rel="import" href="../../../polymer/polymer.html">
     11 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
     12 
     13 <dom-module id="squares-page">
     14   <template>
     15     <style>
     16       .header {
     17         height: 40%;
     18         background: var(--color-one);
     19       }
     20 
     21       .body {
     22         text-align: center;
     23         padding: 8px;
     24       }
     25 
     26       .square {
     27         display: inline-block;
     28         width: 150px;
     29         height: 150px;
     30         margin: 8px;
     31         background: var(--color-two);
     32       }
     33     </style>
     34     
     35     <div id="header" class="header"></div>
     36 
     37     <div class="body">
     38       <div class="square"></div>
     39       <div class="square"></div>
     40       <div class="square"></div>
     41       <div class="square"></div>
     42     </div>
     43 
     44   </template>
     45 
     46 </dom-module>
     47 
     48 <script>
     49 
     50   Polymer({
     51 
     52     is: 'squares-page',
     53 
     54     behaviors: [
     55       Polymer.NeonSharedElementAnimatableBehavior
     56     ],
     57 
     58     properties: {
     59 
     60       sharedElements: {
     61         value: function() {
     62           return {
     63             'hero': this.$.header
     64           }
     65         }
     66       },
     67 
     68       animationConfig: {
     69         value: function() {
     70           var squares = Polymer.dom(this.root).querySelectorAll('.square');
     71           var squaresArray = Array.prototype.slice.call(squares);
     72           return {
     73             'entry': [{
     74               name: 'hero-animation',
     75               id: 'hero',
     76               toPage: this
     77             }, {
     78               name: 'cascaded-animation',
     79               animation: 'transform-animation',
     80               transformFrom: 'translateY(100%)',
     81               nodes: squaresArray
     82             }],
     83 
     84             'exit': [{
     85               name: 'slide-up-animation',
     86               node: this.$.header
     87             }, {
     88               name: 'cascaded-animation',
     89               animation: 'transform-animation',
     90               transformTo: 'translateY(60vh)',
     91               nodes: squaresArray
     92             }]
     93           };
     94         }
     95       }
     96     }
     97 
     98   });
     99 
    100 </script>
    101