• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8-->
9<!--
10
11`paper-dropdown-transition` is a transition for `paper-dropdown`.
12
13Add the class `menu` to a `core-selector` child of the `paper-dropdown` to
14enable the optional list cascade transition.
15
16@group Paper Elements
17@class paper-dropdown-transition
18@extends core-transition-css
19@status unstable
20-->
21<link href="../polymer/polymer.html" rel="import">
22<link href="../core-transition/core-transition-css.html" rel="import">
23<link href="../core-animation/web-animations.html" rel="import">
24
25<polymer-element name="paper-dropdown-transition" extends="core-transition-css">
26  <template>
27    <link href="paper-dropdown-transition.css" rel="stylesheet" no-shim>
28  </template>
29  <script>
30    Polymer('paper-dropdown-transition', {
31
32      publish: {
33
34        /**
35         * The duration of the transition in ms. You can also set the duration by
36         * setting a `duration` attribute on the target:
37         *
38         *    <paper-dropdown duration="1000"></paper-dropdown>
39         *
40         * @attribute duration
41         * @type number
42         * @default 500
43         */
44        duration: 500
45
46      },
47
48      setup: function(node) {
49        this.super(arguments);
50
51        var to = {
52          'top': '0%',
53          'left': '0%',
54          'bottom': '100%',
55          'right': '100%'
56        };
57
58        var bg = node.$.background;
59        bg.style.webkitTransformOrigin = to[node.halign] + ' ' + to[node.valign];
60        bg.style.transformOrigin = to[node.halign] + ' ' + to[node.valign];
61      },
62
63      transitionOpened: function(node, opened) {
64        this.super(arguments);
65
66        if (opened) {
67          if (this.player) {
68            this.player.cancel();
69          }
70
71          var duration = Number(node.getAttribute('duration')) || this.duration;
72
73          var anims = [];
74
75          var size = node.getBoundingClientRect();
76
77          var ink = node.$.ripple;
78          // var offset = 40 / Math.max(size.width, size.height);
79          var offset = 0.2;
80          anims.push(new Animation(ink, [{
81            'opacity': 0.9,
82            'transform': 'scale(0)',
83          }, {
84            'opacity': 0.9,
85            'transform': 'scale(1)'
86          }], {
87            duration: duration * offset
88          }));
89
90          var bg = node.$.background;
91          var sx = 40 / size.width;
92          var sy = 40 / size.height;
93          anims.push(new Animation(bg, [{
94            'opacity': 0.9,
95            'transform': 'scale(' + sx + ',' + sy + ')',
96          }, {
97            'opacity': 1,
98            'transform': 'scale(' + Math.max(sx, 0.95) + ',' + Math.max(sy, 0.5) + ')'
99          }, {
100            'opacity': 1,
101            'transform': 'scale(1, 1)'
102          }], {
103            delay: duration * offset,
104            duration: duration * (1 - offset),
105            fill: 'forwards'
106          }));
107
108          var menu = node.querySelector('.menu');
109          if (menu) {
110            var items = menu.items || menu.children.array();
111            var itemDelay = offset + (1 - offset) / 2;
112            var itemDuration = duration * (1 - itemDelay) / items.length;
113            var reverse = this.valign === 'bottom';
114
115            items.forEach(function(item, i) {
116              anims.push(new Animation(item, [{
117                'opacity': 0
118              }, {
119                'opacity': 1
120              }], {
121                delay: duration * itemDelay + itemDuration * (reverse ? items.length - 1 - i : i),
122                duration: itemDuration,
123                fill: 'both'
124              }));
125            }.bind(this));
126
127            anims.push(new Animation(node.$.scroller, [{
128              'opacity': 1
129            }, {
130              'opacity': 1
131            }], {
132              delay: duration * itemDelay,
133              duration: itemDuration * items.length,
134              fill: 'both'
135            }));
136
137          } else {
138            anims.push(new Animation(node.$.scroller, [{
139              'opacity': 0
140            }, {
141              'opacity': 1
142            }], {
143              delay: duration * (offset + (1 - offset) / 2),
144              duration: duration * 0.5,
145              fill: 'both'
146            }));
147          }
148
149          var group = new AnimationGroup(anims, {
150            easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
151          });
152          this.player = document.timeline.play(group);
153          this.player.onfinish = function() {
154            this.fire('core-transitionend', this, node);
155          }.bind(this);
156
157        } else {
158          this.fire('core-transitionend', this, node);
159        }
160      },
161
162    });
163  </script>
164</polymer-element>
165
166<paper-dropdown-transition id="paper-dropdown-transition"></paper-dropdown-transition>