OLD | NEW |
| (Empty) |
1 | |
2 Polymer('paper-menu-button-transition', { | |
3 | |
4 baseClass: 'paper-menu-button-transition', | |
5 revealedClass: 'paper-menu-button-revealed', | |
6 openedClass: 'paper-menu-button-opened', | |
7 closedClass: 'paper-menu-button-closed', | |
8 | |
9 duration: 500, | |
10 | |
11 setup: function(node) { | |
12 this.super(arguments); | |
13 | |
14 var bg = node.querySelector('.paper-menu-button-overlay-bg'); | |
15 bg.style.transformOrigin = this.transformOrigin; | |
16 bg.style.webkitTransformOrigin = this.transformOrigin; | |
17 }, | |
18 | |
19 transitionOpened: function(node, opened) { | |
20 this.super(arguments); | |
21 | |
22 if (opened) { | |
23 if (this.player) { | |
24 this.player.cancel(); | |
25 } | |
26 | |
27 var anims = []; | |
28 | |
29 var ink = node.querySelector('.paper-menu-button-overlay-ink'); | |
30 var offset = 40 / Math.max(node.cachedSize.width, node.cachedSize.heig
ht); | |
31 anims.push(new Animation(ink, [{ | |
32 'opacity': 0.9, | |
33 'transform': 'scale(0)', | |
34 }, { | |
35 'opacity': 0.9, | |
36 'transform': 'scale(1)' | |
37 }], { | |
38 duration: this.duration * offset | |
39 })); | |
40 | |
41 var bg = node.querySelector('.paper-menu-button-overlay-bg'); | |
42 anims.push(new Animation(bg, [{ | |
43 'opacity': 0.9, | |
44 'transform': 'scale(' + 40 / node.cachedSize.width + ',' + 40 / node
.cachedSize.height + ')', | |
45 }, { | |
46 'opacity': 1, | |
47 'transform': 'scale(0.95, 0.5)' | |
48 }, { | |
49 'opacity': 1, | |
50 'transform': 'scale(1, 1)' | |
51 }], { | |
52 delay: this.duration * offset, | |
53 duration: this.duration * (1 - offset), | |
54 fill: 'forwards' | |
55 })); | |
56 | |
57 var nodes = window.ShadowDOMPolyfill ? Platform.queryAllShadows(node.q
uerySelector('core-menu'), 'content').getDistributedNodes() : node.querySelector
('core-menu::shadow content').getDistributedNodes().array(); | |
58 var items = nodes.filter(function(n) { | |
59 return n.nodeType === Node.ELEMENT_NODE; | |
60 }); | |
61 var itemDelay = offset + (1 - offset) / 2; | |
62 var itemDuration = this.duration * (1 - itemDelay) / items.length; | |
63 items.forEach(function(item, i) { | |
64 anims.push(new Animation(item, [{ | |
65 'opacity': 0 | |
66 }, { | |
67 'opacity': 1 | |
68 }], { | |
69 delay: this.duration * itemDelay + itemDuration * i, | |
70 duration: itemDuration, | |
71 fill: 'both' | |
72 })); | |
73 }.bind(this)); | |
74 | |
75 var shadow = node.querySelector('paper-shadow'); | |
76 anims.push(new Animation(shadow, function(t, target) { | |
77 if (t > offset * 2 && shadow.z === 0) { | |
78 shadow.z = 1 | |
79 } | |
80 }, { | |
81 duration: this.duration | |
82 })); | |
83 | |
84 var group = new AnimationGroup(anims, { | |
85 easing: 'cubic-bezier(0.4, 0, 0.2, 1)' | |
86 }); | |
87 this.player = document.timeline.play(group); | |
88 } | |
89 }, | |
90 | |
91 }); | |
92 | |
OLD | NEW |