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
11<link rel="import" href="../../../polymer/polymer.html">
12<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
13<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
14
15<dom-module id="x-cards-list">
16  <template>
17    <style>
18      :host {
19        display: block;
20        overflow: hidden;
21      }
22
23      #placeholder {
24        opacity: 0;
25        background-color: grey;
26        @apply(--layout-fit);
27      }
28    </style>
29
30    <div id="placeholder"></div>
31    <div id="container">
32      <content select="div"></content>
33    </div>
34
35  </template>
36</dom-module>
37
38<script>
39(function() {
40  Polymer({
41    is: 'x-cards-list',
42
43    behaviors: [
44      Polymer.NeonSharedElementAnimatableBehavior
45    ],
46
47    properties: {
48      animationConfig: {
49        value: function() {
50          return {
51            'entry': [{
52              name: 'reverse-ripple-animation',
53              id: 'reverse-ripple',
54              toPage: this
55            }],
56
57            'exit': [{
58              name: 'fade-out-animation',
59              node: this.$.container,
60              timing: {
61                delay: 150,
62                duration: 0
63              }
64            }, {
65              name: 'ripple-animation',
66              id: 'ripple',
67              fromPage: this
68            }]
69          };
70        }
71      }
72    }
73  });
74})();
75</script>
76