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.height);
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.querySelector('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