← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/neon-animation/demo/card/x-cards-list.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/neon-animation/demo/card/x-cards-list.html
 
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-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>