Home | History | Annotate | Download | only in card 
      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 
     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