1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
@group Paper Elements
@class paper-menu-button-transition
@extends core-transition-css
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../core-transition/core-transition-css.html" rel="import">
<link href="../core-animation/web-animations.html" rel="import">
<polymer-element name="paper-menu-button-transition" extends="core-transition-css" attributes="duration transformOrigin">
<template>
<link no-shim href="paper-menu-button-transition.css" rel="stylesheet">
</template>
<script>
Polymer('paper-menu-button-transition', {
baseClass: 'paper-menu-button-transition',
revealedClass: 'paper-menu-button-revealed',
openedClass: 'paper-menu-button-opened',
closedClass: 'paper-menu-button-closed',
duration: 500,
setup: function(node) {
this.super(arguments);
var bg = node.querySelector('.paper-menu-button-overlay-bg');
bg.style.transformOrigin = this.transformOrigin;
bg.style.webkitTransformOrigin = this.transformOrigin;
},
transitionOpened: function(node, opened) {
this.super(arguments);
if (opened) {
if (this.player) {
this.player.cancel();
}
var anims = [];
var ink = node.querySelector('.paper-menu-button-overlay-ink');
var offset = 40 / Math.max(node.cachedSize.width, node.cachedSize.height);
anims.push(new Animation(ink, [{
'opacity': 0.9,
'transform': 'scale(0)',
}, {
'opacity': 0.9,
'transform': 'scale(1)'
}], {
duration: this.duration * offset
}));
var bg = node.querySelector('.paper-menu-button-overlay-bg');
anims.push(new Animation(bg, [{
'opacity': 0.9,
'transform': 'scale(' + 40 / node.cachedSize.width + ',' + 40 / node.cachedSize.height + ')',
}, {
'opacity': 1,
'transform': 'scale(0.95, 0.5)'
}, {
'opacity': 1,
'transform': 'scale(1, 1)'
}], {
delay: this.duration * offset,
duration: this.duration * (1 - offset),
fill: 'forwards'
}));
var nodes = window.ShadowDOMPolyfill ? Platform.queryAllShadows(node.querySelector('core-menu'), 'content').getDistributedNodes() : node.querySelector('core-menu::shadow content').getDistributedNodes().array();
var items = nodes.filter(function(n) {
return n.nodeType === Node.ELEMENT_NODE;
});
var itemDelay = offset + (1 - offset) / 2;
var itemDuration = this.duration * (1 - itemDelay) / items.length;
items.forEach(function(item, i) {
anims.push(new Animation(item, [{
'opacity': 0
}, {
'opacity': 1
}], {
delay: this.duration * itemDelay + itemDuration * i,
duration: itemDuration,
fill: 'both'
}));
}.bind(this));
var shadow = node.querySelector('paper-shadow');
anims.push(new Animation(shadow, function(t, target) {
if (t > offset * 2 && shadow.z === 0) {
shadow.z = 1
}
}, {
duration: this.duration
}));
var group = new AnimationGroup(anims, {
easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
});
this.player = document.timeline.play(group);
}
},
});
</script>
</polymer-element>
<paper-menu-button-transition id="paper-menu-button-transition-top-left" transformOrigin="0% 0%"></paper-menu-button-transition>
<paper-menu-button-transition id="paper-menu-button-transition-top-right" transformOrigin="100% 0%"></paper-menu-button-transition>
<paper-menu-button-transition id="paper-menu-button-transition-top-right-slow" transformOrigin="100% 0%" duration="10000"></paper-menu-button-transition>
|
