OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | 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 | 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 | 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 | 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 | 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 | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
8 --><html><head><link rel="import" href="../polymer/polymer.html"> | 8 --><html><head><link rel="import" href="../polymer/polymer.html"> |
9 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> | 9 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> |
10 | 10 |
11 <!-- | 11 <!-- |
12 Material design: [Surface reaction](https://www.google.com/design/spec/animation
/responsive-interaction.html#responsive-interaction-surface-reaction) | 12 Material design: [Surface reaction](https://www.google.com/design/spec/animation
/responsive-interaction.html#responsive-interaction-surface-reaction) |
13 | 13 |
14 `paper-ripple` provides a visual effect that other paper elements can | 14 `paper-ripple` provides a visual effect that other paper elements can |
15 use to simulate a rippling effect emanating from the point of contact. The | 15 use to simulate a rippling effect emanating from the point of contact. The |
16 effect can be visualized as a concentric circle with motion. | 16 effect can be visualized as a concentric circle with motion. |
17 | 17 |
18 Example: | 18 Example: |
19 | 19 |
20 <div style="position:relative"> | 20 <div style="position:relative"> |
21 <paper-ripple></paper-ripple> | 21 <paper-ripple></paper-ripple> |
22 </div> | 22 </div> |
23 | 23 |
24 Note, it's important that the parent container of the ripple be relative positio
n, otherwise | 24 Note, it's important that the parent container of the ripple be relative positio
n, otherwise |
25 the ripple will emanate outside of the desired container. | 25 the ripple will emanate outside of the desired container. |
26 | 26 |
27 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r
ipple | 27 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r
ipple |
28 effect when touches on it. You can also defeat the default behavior and | 28 effect when touches on it. You can also defeat the default behavior and |
29 manually route the down and up actions to the ripple element. Note that it is | 29 manually route the down and up actions to the ripple element. Note that it is |
30 important if you call `downAction()` you will have to make sure to call | 30 important if you call `downAction()` you will have to make sure to call |
31 `upAction()` so that `paper-ripple` would end the animation loop. | 31 `upAction()` so that `paper-ripple` would end the animation loop. |
32 | 32 |
33 Example: | 33 Example: |
34 | 34 |
35 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> | 35 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
74 </head><body><dom-module id="paper-ripple"> | 74 </head><body><dom-module id="paper-ripple"> |
75 | 75 |
76 <!-- | 76 <!-- |
77 Fired when the animation finishes. This is useful if you want to wait until th
e ripple | 77 Fired when the animation finishes. This is useful if you want to wait until th
e ripple |
78 animation finishes to perform some action. | 78 animation finishes to perform some action. |
79 | 79 |
80 @event transitionend | 80 @event transitionend |
81 @param {Object} detail | 81 @param {Object} detail |
82 @param {Object} detail.node The animated node | 82 @param {Object} detail.node The animated node |
83 --> | 83 --> |
84 | 84 |
85 <template> | 85 <template> |
86 <style> | 86 <style> |
87 :host { | 87 :host { |
88 display: block; | 88 display: block; |
89 position: absolute; | 89 position: absolute; |
90 border-radius: inherit; | 90 border-radius: inherit; |
91 overflow: hidden; | 91 overflow: hidden; |
92 top: 0; | 92 top: 0; |
93 left: 0; | 93 left: 0; |
94 right: 0; | 94 right: 0; |
95 bottom: 0; | 95 bottom: 0; |
| 96 |
| 97 /* See PolymerElements/paper-behaviors/issues/34. On non-Chrome browsers
, |
| 98 * creating a node (with a position:absolute) in the middle of an event |
| 99 * handler "interrupts" that event handler (which happens when the |
| 100 * ripple is created on demand) */ |
| 101 pointer-events: none; |
96 } | 102 } |
97 | 103 |
98 :host([animating]) { | 104 :host([animating]) { |
99 /* This resolves a rendering issue in Chrome (as of 40) where the | 105 /* This resolves a rendering issue in Chrome (as of 40) where the |
100 ripple is not properly clipped by its parent (which may have | 106 ripple is not properly clipped by its parent (which may have |
101 rounded corners). See: http://jsbin.com/temexa/4 | 107 rounded corners). See: http://jsbin.com/temexa/4 |
102 | 108 |
103 Note: We only apply this style conditionally. Otherwise, the browser | 109 Note: We only apply this style conditionally. Otherwise, the browser |
104 will create a new compositing layer for every ripple element on the | 110 will create a new compositing layer for every ripple element on the |
105 page, and that would be bad. */ | 111 page, and that would be bad. */ |
106 -webkit-transform: translate(0, 0); | 112 -webkit-transform: translate(0, 0); |
107 transform: translate3d(0, 0, 0); | 113 transform: translate3d(0, 0, 0); |
108 } | 114 } |
109 | 115 |
110 :host([noink]) { | 116 :host([noink]) { |
111 pointer-events: none; | 117 pointer-events: none; |
112 } | 118 } |
113 | 119 |
114 #background, | 120 #background, |
115 #waves, | 121 #waves, |
116 .wave-container, | 122 .wave-container, |
117 .wave { | 123 .wave { |
118 pointer-events: none; | 124 pointer-events: none; |
119 position: absolute; | 125 position: absolute; |
120 top: 0; | 126 top: 0; |
121 left: 0; | 127 left: 0; |
122 width: 100%; | 128 width: 100%; |
123 height: 100%; | 129 height: 100%; |
124 } | 130 } |
125 | 131 |
126 #background, | 132 #background, |
127 .wave { | 133 .wave { |
128 opacity: 0; | 134 opacity: 0; |
129 } | 135 } |
130 | 136 |
131 #waves, | 137 #waves, |
132 .wave { | 138 .wave { |
133 overflow: hidden; | 139 overflow: hidden; |
134 } | 140 } |
135 | 141 |
136 .wave-container, | 142 .wave-container, |
137 .wave { | 143 .wave { |
138 border-radius: 50%; | 144 border-radius: 50%; |
139 } | 145 } |
140 | 146 |
141 :host(.circle) #background, | 147 :host(.circle) #background, |
142 :host(.circle) #waves { | 148 :host(.circle) #waves { |
143 border-radius: 50%; | 149 border-radius: 50%; |
144 } | 150 } |
145 | 151 |
146 :host(.circle) .wave-container { | 152 :host(.circle) .wave-container { |
147 overflow: hidden; | 153 overflow: hidden; |
148 } | 154 } |
149 </style> | 155 </style> |
150 | 156 |
151 <div id="background"></div> | 157 <div id="background"></div> |
152 <div id="waves"></div> | 158 <div id="waves"></div> |
153 </template> | 159 </template> |
154 </dom-module> | 160 </dom-module> |
155 <script src="paper-ripple-extracted.js"></script></body></html> | 161 <script src="paper-ripple-extracted.js"></script></body></html> |
OLD | NEW |