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 |