diff options
Diffstat (limited to 'third_party/polymer/components/paper-menu-button/paper-menu-button-transition.html')
-rw-r--r-- | third_party/polymer/components/paper-menu-button/paper-menu-button-transition.html | 118 |
1 files changed, 0 insertions, 118 deletions
diff --git a/third_party/polymer/components/paper-menu-button/paper-menu-button-transition.html b/third_party/polymer/components/paper-menu-button/paper-menu-button-transition.html deleted file mode 100644 index 7c6307f..0000000 --- a/third_party/polymer/components/paper-menu-button/paper-menu-button-transition.html +++ /dev/null @@ -1,118 +0,0 @@ -<!-- -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> |