• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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