Polymer elements added to third_party/polymer.

third_party/polymer/components/paper-menu-button/paper-menu-button-transition.html

+<!--
+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>