OLD | NEW |
(Empty) | |
| 1 |
| 2 |
| 3 Polymer({ |
| 4 |
| 5 is: 'hero-animation', |
| 6 |
| 7 behaviors: [ |
| 8 Polymer.NeonSharedElementAnimationBehavior |
| 9 ], |
| 10 |
| 11 configure: function(config) { |
| 12 var shared = this.findSharedElements(config); |
| 13 if (!shared) { |
| 14 return null; |
| 15 } |
| 16 |
| 17 var fromRect = shared.from.getBoundingClientRect(); |
| 18 var toRect = shared.to.getBoundingClientRect(); |
| 19 |
| 20 var deltaLeft = fromRect.left - toRect.left; |
| 21 var deltaTop = fromRect.top - toRect.top; |
| 22 var deltaWidth = fromRect.width / toRect.width; |
| 23 var deltaHeight = fromRect.height / toRect.height; |
| 24 |
| 25 this.setPrefixedProperty(shared.to, 'transformOrigin', '0 0'); |
| 26 shared.to.style.zIndex = 10000; |
| 27 shared.from.style.visibility = 'hidden'; |
| 28 |
| 29 this._effect = new KeyframeEffect(shared.to, [ |
| 30 {'transform': 'translate(' + deltaLeft + 'px,' + deltaTop + 'px) scale('
+ deltaWidth + ',' + deltaHeight + ')'}, |
| 31 {'transform': 'none'} |
| 32 ], this.timingFromConfig(config)); |
| 33 |
| 34 return this._effect; |
| 35 }, |
| 36 |
| 37 complete: function(config) { |
| 38 var shared = this.findSharedElements(config); |
| 39 if (!shared) { |
| 40 return null; |
| 41 } |
| 42 shared.to.style.zIndex = ''; |
| 43 shared.from.style.visibility = ''; |
| 44 } |
| 45 |
| 46 }); |
| 47 |
OLD | NEW |