third_party/polymer/components-chromium/paper-menu-button/paper-menu-button-transition-extracted.js

   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