• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../iron-meta/iron-meta.html">
13
14<script>
15
16  /**
17   * Use `Polymer.NeonAnimationBehavior` to implement an animation.
18   * @polymerBehavior
19   */
20  Polymer.NeonAnimationBehavior = {
21
22    properties: {
23
24      /**
25       * Defines the animation timing.
26       */
27      animationTiming: {
28        type: Object,
29        value: function() {
30          return {
31            duration: 500,
32            easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
33            fill: 'both'
34          }
35        }
36      }
37
38    },
39
40    /**
41     * Can be used to determine that elements implement this behavior.
42     */
43    isNeonAnimation: true,
44
45    /**
46     * Do any animation configuration here.
47     */
48    // configure: function(config) {
49    // },
50
51    /**
52     * Returns the animation timing by mixing in properties from `config` to the defaults defined
53     * by the animation.
54     */
55    timingFromConfig: function(config) {
56      if (config.timing) {
57        for (var property in config.timing) {
58          this.animationTiming[property] = config.timing[property];
59        }
60      }
61      return this.animationTiming;
62    },
63
64    /**
65     * Sets `transform` and `transformOrigin` properties along with the prefixed versions.
66     */
67    setPrefixedProperty: function(node, property, value) {
68      var map = {
69        'transform': ['webkitTransform'],
70        'transformOrigin': ['mozTransformOrigin', 'webkitTransformOrigin']
71      };
72      var prefixes = map[property];
73      for (var prefix, index = 0; prefix = prefixes[index]; index++) {
74        node.style[prefix] = value;
75      }
76      node.style[property] = value;
77    },
78
79    /**
80     * Called when the animation finishes.
81     */
82    complete: function() {}
83
84  };
85
86</script>
87