Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(6)

Side by Side Diff: bower_components/paper-menu-button/paper-menu-button-transition.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
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.g ithub.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/CONTRI BUTORS.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/PATEN TS.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-cs s" 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 completeEventName: null,
30
31 duration: 500,
32
33 setup: function(node) {
34 this.super(arguments);
35
36 var bg = node.querySelector('.paper-menu-button-overlay-bg');
37 bg.style.transformOrigin = this.transformOrigin;
38 bg.style.webkitTransformOrigin = this.transformOrigin;
39 },
40
41 transitionOpened: function(node, opened) {
42 this.super(arguments);
43
44 if (opened) {
45 if (this.player) {
46 this.player.cancel();
47 }
48
49 var anims = [];
50
51 var size = node.getBoundingClientRect();
52
53 var ink = node.querySelector('.paper-menu-button-overlay-ink');
54 var offset = 40 / Math.max(size.width, size.height);
55 anims.push(new Animation(ink, [{
56 'opacity': 0.9,
57 'transform': 'scale(0)',
58 }, {
59 'opacity': 0.9,
60 'transform': 'scale(1)'
61 }], {
62 duration: this.duration * offset
63 }));
64
65 var bg = node.querySelector('.paper-menu-button-overlay-bg');
66 anims.push(new Animation(bg, [{
67 'opacity': 0.9,
68 'transform': 'scale(' + 40 / size.width + ',' + 40 / size.height + ' )',
69 }, {
70 'opacity': 1,
71 'transform': 'scale(0.95, 0.5)'
72 }, {
73 'opacity': 1,
74 'transform': 'scale(1, 1)'
75 }], {
76 delay: this.duration * offset,
77 duration: this.duration * (1 - offset),
78 fill: 'forwards'
79 }));
80
81 var items = node.querySelector('#menu').items;
82 var itemDelay = offset + (1 - offset) / 2;
83 var itemDuration = this.duration * (1 - itemDelay) / items.length;
84 var reverse = this.transformOrigin.split(' ')[1] === '100%';
85 items.forEach(function(item, i) {
86 if (!item.classList.contains('paper-menu-button-overlay-bg') && !ite m.classList.contains('paper-menu-button-overlay-ink')) {
87 anims.push(new Animation(item, [{
88 'opacity': 0
89 }, {
90 'opacity': 1
91 }], {
92 delay: this.duration * itemDelay + itemDuration * (reverse ? ite ms.length - 1 - i : i),
93 duration: itemDuration,
94 fill: 'both'
95 }));
96 }
97 }.bind(this));
98
99 var group = new AnimationGroup(anims, {
100 easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
101 });
102 this.player = document.timeline.play(group);
103 this.player.onfinish = function() {
104 this.fire('core-transitionend', this, node);
105 }.bind(this);
106
107 } else {
108 this.listenOnce(node, 'transitionend', function() {
109 this.fire('core-transitionend', this, node);
110 }.bind(this));
111 }
112 },
113
114 });
115 </script>
116 </polymer-element>
117
118 <paper-menu-button-transition id="paper-menu-button-transition-top-left" transfo rmOrigin="0% 0%"></paper-menu-button-transition>
119 <paper-menu-button-transition id="paper-menu-button-transition-top-right" transf ormOrigin="100% 0%"></paper-menu-button-transition>
120 <paper-menu-button-transition id="paper-menu-button-transition-top-right-slow" t ransformOrigin="100% 0%" duration="10000"></paper-menu-button-transition>
121
122 <paper-menu-button-transition id="paper-menu-button-transition-bottom-left" tran sformOrigin="0% 100%"></paper-menu-button-transition>
123 <paper-menu-button-transition id="paper-menu-button-transition-bottom-right" tra nsformOrigin="100% 100%"></paper-menu-button-transition>
OLDNEW
« no previous file with comments | « bower_components/paper-menu-button/paper-menu-button-transition.css ('k') | bower_components/paper-progress/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698