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

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9 <!--
  10 @group Paper Elements
  11 @class paper-menu-button-transition
  12 @extends core-transition-css
  13 -->
  14 <link href="../polymer/polymer.html" rel="import">
  15 <link href="../core-transition/core-transition-css.html" rel="import">
  16 <link href="../core-animation/web-animations.html" rel="import">
  17
  18 <polymer-element name="paper-menu-button-transition" extends="core-transition-css" attributes="duration transformOrigin">
  19   <template>
  20     <link no-shim href="paper-menu-button-transition.css" rel="stylesheet">
  21   </template>
  22   <script>
  23     Polymer('paper-menu-button-transition', {
  24
  25       baseClass: 'paper-menu-button-transition',
  26       revealedClass: 'paper-menu-button-revealed',
  27       openedClass: 'paper-menu-button-opened',
  28       closedClass: 'paper-menu-button-closed',
  29
  30       duration: 500,
  31
  32       setup: function(node) {
  33         this.super(arguments);
  34
  35         var bg = node.querySelector('.paper-menu-button-overlay-bg');
  36         bg.style.transformOrigin = this.transformOrigin;
  37         bg.style.webkitTransformOrigin = this.transformOrigin;
  38       },
  39
  40       transitionOpened: function(node, opened) {
  41         this.super(arguments);
  42
  43         if (opened) {
  44           if (this.player) {
  45             this.player.cancel();
  46           }
  47
  48           var anims = [];
  49
  50           var ink = node.querySelector('.paper-menu-button-overlay-ink');
  51           var offset = 40 / Math.max(node.cachedSize.width, node.cachedSize.height);
  52           anims.push(new Animation(ink, [{
  53             'opacity': 0.9,
  54             'transform': 'scale(0)',
  55           }, {
  56             'opacity': 0.9,
  57             'transform': 'scale(1)'
  58           }], {
  59             duration: this.duration * offset
  60           }));
  61
  62           var bg = node.querySelector('.paper-menu-button-overlay-bg');
  63           anims.push(new Animation(bg, [{
  64             'opacity': 0.9,
  65             'transform': 'scale(' + 40 / node.cachedSize.width + ',' + 40 / node.cachedSize.height + ')',
  66           }, {
  67             'opacity': 1,
  68             'transform': 'scale(0.95, 0.5)'
  69           }, {
  70             'opacity': 1,
  71             'transform': 'scale(1, 1)'
  72           }], {
  73             delay: this.duration * offset,
  74             duration: this.duration * (1 - offset),
  75             fill: 'forwards'
  76           }));
  77
  78           var nodes = window.ShadowDOMPolyfill ? Platform.queryAllShadows(node.querySelector('core-menu'), 'content').getDistributedNodes() : node.querySelector('core-menu::shadow content').getDistributedNodes().array();
  79           var items = nodes.filter(function(n) {
  80             return n.nodeType === Node.ELEMENT_NODE;
  81           });
  82           var itemDelay = offset + (1 - offset) / 2;
  83           var itemDuration = this.duration * (1 - itemDelay) / items.length;
  84           items.forEach(function(item, i) {
  85             anims.push(new Animation(item, [{
  86               'opacity': 0
  87             }, {
  88               'opacity': 1
  89             }], {
  90               delay: this.duration * itemDelay + itemDuration * i,
  91               duration: itemDuration,
  92               fill: 'both'
  93             }));
  94           }.bind(this));
  95
  96           var shadow = node.querySelector('paper-shadow');
  97           anims.push(new Animation(shadow, function(t, target) {
  98             if (t > offset * 2 && shadow.z === 0) {
  99               shadow.z = 1
 100             }
 101           }, {
 102             duration: this.duration
 103           }));
 104
 105           var group = new AnimationGroup(anims, {
 106             easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
 107           });
 108           this.player = document.timeline.play(group);
 109         }
 110       },
 111
 112     });
 113   </script>
 114 </polymer-element>
 115
 116 <paper-menu-button-transition id="paper-menu-button-transition-top-left" transformOrigin="0% 0%"></paper-menu-button-transition>
 117 <paper-menu-button-transition id="paper-menu-button-transition-top-right" transformOrigin="100% 0%"></paper-menu-button-transition>
 118 <paper-menu-button-transition id="paper-menu-button-transition-top-right-slow" transformOrigin="100% 0%" duration="10000"></paper-menu-button-transition>