| OLD | NEW |
|---|
| (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 `paper-ripple` provides a visual effect that other paper elements can | |
| 10 use to simulate a rippling effect emanating from the point of contact. The | |
| 11 effect can be visualized as a concentric circle with motion. | |
| 12 | |
| 13 Example: | |
| 14 | |
| 15 <paper-ripple></paper-ripple> | |
| 16 | |
| 17 `paper-ripple` listens to "down" and "up" events so it would display ripple | |
| 18 effect when touches on it. You can also defeat the default behavior and | |
| 19 manually route the down and up actions to the ripple element. Note that it is | |
| 20 important if you call downAction() you will have to make sure to call upAction() | |
| 21 so that `paper-ripple` would end the animation loop. | |
| 22 | |
| 23 Example: | |
| 24 | |
| 25 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> | |
| 26 ... | |
| 27 downAction: function(e) { | |
| 28 this.$.ripple.downAction({x: e.x, y: e.y}); | |
| 29 }, | |
| 30 upAction: function(e) { | |
| 31 this.$.ripple.upAction(); | |
| 32 } | |
| 33 | |
| 34 Styling ripple effect: | |
| 35 | |
| 36 Use CSS color property to style the ripple: | |
| 37 | |
| 38 paper-ripple { | |
| 39 color: #4285f4; | |
| 40 } | |
| 41 | |
| 42 Note that CSS color property is inherited so it is not required to set it on | |
| 43 the `paper-ripple` element directly. | |
| 44 | |
| 45 By default, the ripple is centered on the point of contact. Apply `recenteringT
ouch` | |
| 46 class to have the ripple grow toward the center of its container. | |
| 47 | |
| 48 <paper-ripple class="recenteringTouch"></paper-ripple> | |
| 49 | |
| 50 Apply `circle` class to make the rippling effect within a circle. | |
| 51 | |
| 52 <paper-ripple class="circle"></paper-ripple> | |
| 53 | |
| 54 @group Paper Elements | |
| 55 @element paper-ripple | |
| 56 @homepage github.io | |
| 57 --><!-- | |
| 58 Fired when the animation finishes. This is useful if you want to wait until the
ripple | |
| 59 animation finishes to perform some action. | |
| 60 | |
| 61 @event core-transitionend | |
| 62 @param {Object} detail | |
| 63 @param {Object} detail.node The animated node | |
| 64 --><html><head><link rel="import" href="../polymer/polymer.html"> | |
| 65 | |
| 66 </head><body><polymer-element name="paper-ripple" attributes="initialOpacity opa
cityDecayVelocity" assetpath=""> | |
| 67 <template> | |
| 68 | |
| 69 <style> | |
| 70 | |
| 71 :host { | |
| 72 display: block; | |
| 73 position: relative; | |
| 74 border-radius: inherit; | |
| 75 overflow: hidden; | |
| 76 } | |
| 77 | |
| 78 :host-context([noink]) { | |
| 79 pointer-events: none; | |
| 80 } | |
| 81 | |
| 82 #bg, #waves, .wave-container, .wave { | |
| 83 pointer-events: none; | |
| 84 position: absolute; | |
| 85 top: 0; | |
| 86 left: 0; | |
| 87 width: 100%; | |
| 88 height: 100%; | |
| 89 } | |
| 90 | |
| 91 #bg, .wave { | |
| 92 opacity: 0; | |
| 93 } | |
| 94 | |
| 95 #waves, .wave { | |
| 96 overflow: hidden; | |
| 97 } | |
| 98 | |
| 99 .wave-container, .wave { | |
| 100 border-radius: 50%; | |
| 101 } | |
| 102 | |
| 103 :host(.circle) #bg, | |
| 104 :host(.circle) #waves { | |
| 105 border-radius: 50%; | |
| 106 } | |
| 107 | |
| 108 :host(.circle) .wave-container { | |
| 109 overflow: hidden; | |
| 110 } | |
| 111 | |
| 112 </style> | |
| 113 | |
| 114 <div id="bg"></div> | |
| 115 <div id="waves"> | |
| 116 </div> | |
| 117 | |
| 118 </template> | |
| 119 | |
| 120 </polymer-element> | |
| 121 <script charset="utf-8" src="paper-ripple-extracted.js"></script></body></html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1215543002:
Remove Polymer 0.5. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master