• 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
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-card">
16  <template>
17    <style>
18      :host {
19        display: block;
20        overflow: hidden;
21      }
22      #placeholder {
23        opacity: 0;
24        background-color: grey;
25        @apply(--layout-fit);
26      }
27    </style>
28
29    <div id="placeholder"></div>
30    <div id="container">
31      <content select="div"></content>
32    </div>
33
34  </template>
35</dom-module>
36
37<script>
38(function() {
39  Polymer({
40    is: 'x-card',
41
42    behaviors: [
43      Polymer.NeonSharedElementAnimatableBehavior
44    ],
45
46    properties: {
47      animationConfig: {
48        value: function() {
49          return {
50            'entry': [{
51              name: 'ripple-animation',
52              id: 'ripple',
53              toPage: this
54            }, {
55              name: 'fade-out-animation',
56              node: this.$.placeholder,
57              timing: {
58                delay: 250
59              }
60            }, {
61              name: 'fade-in-animation',
62              node: this.$.container,
63              timing: {
64                delay: 50
65              }
66            }],
67
68            'exit': [{
69              name: 'fade-out-animation',
70              node: this.$.container,
71              timing: {
72                duration: 0
73              }
74            }, {
75              name: 'reverse-ripple-animation',
76              id: 'reverse-ripple',
77              fromPage: this
78            }]
79          };
80        }
81      },
82
83      sharedElements: {
84        value: function() {
85          return {
86            'ripple': this.$.placeholder,
87            'reverse-ripple': this.$.placeholder
88          };
89        }
90      }
91    }
92  });
93})();
94</script>
95