paper-square-grow-animation.html
1.09 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../neon-animation/neon-animation-behavior.html">
<!--
`<paper-square-grow-animation>` increases the element's width and height from an initial
predefined pixel square size to its final size.
Configuration:
```
{
name: 'expand-animation',
node: <node>,
startSize: <start-size-in-px>,
timing: <animation-timing>,
}
```
@hero hero.svg
@demo demo/index.html
-->
<script>
Polymer({
is: 'paper-square-grow-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
var startSize = config.startSize;
var height = node.getBoundingClientRect().height;
var width = node.getBoundingClientRect().width;
this._effect = new KeyframeEffect(node, [{
height: startSize + 'px',
width: startSize + 'px'
}, {
height: height + 'px',
width: width + 'px'
}], this.timingFromConfig(config));
return this._effect;
}
});
</script>