Home | History | Annotate | Download | only in paper-menu-button 
      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>
    119