grability-test/down-slide.html at gh-pages · antaresgeo/grability-test · GitHub

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="build_system/bower_components/polymer/polymer.html">
<link rel="import" href="build_system/bower_components/neon-animation/neon-animation-behavior.html">
<link rel="import" href="build_system/bower_components/neon-animation/web-animations.html">


<script>

  Polymer({

    is: 'down-slide',

    behaviors: [
      Polymer.NeonAnimationBehavior
    ],

    configure: function(config) {
      var node = config.node;
      if (config.transformOrigin) {
        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
      } else {
        this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
      }
      this._effect = new KeyframeEffect(node, [
        {'transform': 'translate(0)'},
        {'transform': 'translateY(-5%)'},
        {'transform': 'translate(0)'},
        {'transform': 'translateY(-10%)'},
        {'transform': 'translate(0)'},
        {'transform': 'translateY(100%)'},
        {'transform': 'translateY(105%)'},
        {'transform': 'translateY(100%)'},
        {'transform': 'translateY(95%)'},
        {'transform': 'translateY(100%)'}
      ], this.timingFromConfig(config));

      return this._effect;
    }

  });

</script>