| OLD | NEW |
| (Empty) |
| 1 | |
| 2 | |
| 3 Polymer({ | |
| 4 | |
| 5 is: 'ripple-animation', | |
| 6 | |
| 7 behaviors: [ | |
| 8 Polymer.NeonSharedElementAnimationBehavior | |
| 9 ], | |
| 10 | |
| 11 configure: function(config, fromPage, toPage) { | |
| 12 var shared = this.findSharedElements(config, fromPage, toPage); | |
| 13 if (!shared) { | |
| 14 return null; | |
| 15 } | |
| 16 | |
| 17 var translateX, translateY; | |
| 18 var toRect = shared.to.getBoundingClientRect(); | |
| 19 if (config.gesture) { | |
| 20 translateX = config.gesture.x - (toRect.left + (toRect.width / 2)); | |
| 21 translateY = config.gesture.y - (toRect.left + (toRect.height / 2)); | |
| 22 } else { | |
| 23 var fromRect = shared.from.getBoundingClientRect(); | |
| 24 translateX = (fromRect.left + (fromRect.width / 2)) - (toRect.left + (to
Rect.width / 2)); | |
| 25 translateY = (fromRect.top + (fromRect.height / 2)) - (toRect.left + (to
Rect.height / 2)); | |
| 26 } | |
| 27 var translate = 'translate(' + translateX + 'px,' + translateY + 'px)'; | |
| 28 | |
| 29 var size = Math.max(toRect.width + Math.abs(translateX) * 2, toRect.height
+ Math.abs(translateY) * 2); | |
| 30 var diameter = Math.sqrt(2 * size * size); | |
| 31 var scaleX = diameter / toRect.width; | |
| 32 var scaleY = diameter / toRect.height; | |
| 33 var scale = 'scale(' + scaleX + ',' + scaleY + ')'; | |
| 34 | |
| 35 this.setPrefixedProperty(shared.to, 'transformOrigin', '50% 50%'); | |
| 36 shared.to.style.borderRadius = '50%'; | |
| 37 | |
| 38 this._effect = new KeyframeEffect(shared.to, [ | |
| 39 {'transform': translate + ' scale(0)'}, | |
| 40 {'transform': translate + ' ' + scale} | |
| 41 ], this.timingFromConfig(config)); | |
| 42 return this._effect; | |
| 43 }, | |
| 44 | |
| 45 complete: function() { | |
| 46 if (this.sharedElements) { | |
| 47 this.setPrefixedProperty(this.sharedElements.to, 'transformOrigin', ''); | |
| 48 this.sharedElements.to.style.borderRadius = ''; | |
| 49 } | |
| 50 } | |
| 51 | |
| 52 }); | |
| 53 | |
| OLD | NEW |