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

Side by Side Diff: polymer_1.0.4/bower_components/neon-animation/demo/tiles/circles-page.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 5 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) 2015 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 <link rel="import" href="../../../polymer/polymer.html">
10 <link rel="import" href="../../../paper-styles/paper-styles.html">
11 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
12
13 <dom-module id="circles-page">
14
15 <style>
16
17 :host {
18 @apply(--layout-horizontal);
19 @apply(--layout-center-center);
20 }
21
22 .circle {
23 display: inline-block;
24 box-sizing: border-box;
25 width: 100px;
26 height: 100px;
27 margin: 16px;
28 border-radius: 50%;
29 background: var(--color-one);
30 }
31
32 </style>
33
34 <template>
35
36 <div>
37 <div class="circle"></div>
38 <div class="circle"></div>
39 <div class="circle"></div>
40 <div class="circle"></div>
41 </div>
42
43 </template>
44
45 </dom-module>
46
47 <script>
48
49 Polymer({
50
51 is: 'circles-page',
52
53 behaviors: [
54 Polymer.NeonSharedElementAnimatableBehavior
55 ],
56
57 properties: {
58
59 animationConfig: {
60 value: function() {
61 var circles = Polymer.dom(this.root).querySelectorAll('.circle');
62 var circlesArray = Array.prototype.slice.call(circles);
63 return {
64 'entry': [{
65 name: 'cascaded-animation',
66 animation: 'scale-up-animation',
67 nodes: circlesArray
68 }],
69
70 'exit': [{
71 name: 'hero-animation',
72 id: 'hero',
73 fromPage: this
74 }, {
75 name: 'cascaded-animation',
76 animation: 'scale-down-animation'
77 }]
78 };
79 }
80 }
81 },
82
83 listeners: {
84 'click': '_onClick'
85 },
86
87 _onClick: function(event) {
88 var target = event.target;
89 if (target.classList.contains('circle')) {
90 // configure the page animation
91 this.sharedElements = {
92 'hero': target
93 };
94
95 var nodesToScale = [];
96 var circles = Polymer.dom(this.root).querySelectorAll('.circle');
97 for (var node, index = 0; node = circles[index]; index++) {
98 if (node !== event.target) {
99 nodesToScale.push(node);
100 }
101 }
102 this.animationConfig['exit'][1].nodes = nodesToScale;
103
104 this.fire('circle-click');
105 }
106 }
107
108 });
109
110 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698