Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(143)

Side by Side Diff: third_party/polymer/components-chromium/paper-menu-button/paper-menu-button-transition-extracted.js

Issue 666453002: Removed Polymer elements depending on web-animations-js. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698