third_party/polymer/v1_0/components/neon-animation/neon-animation-behavior.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject 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     registered: function() {
  41       new Polymer.IronMeta({type: 'animation', key: this.is, value: this.constructor});
  42     },
  43
  44     /**
  45      * Do any animation configuration here.
  46      */
  47     // configure: function(config) {
  48     // },
  49
  50     /**
  51      * Returns the animation timing by mixing in properties from `config` to the defaults defined
  52      * by the animation.
  53      */
  54     timingFromConfig: function(config) {
  55       if (config.timing) {
  56         for (var property in config.timing) {
  57           this.animationTiming[property] = config.timing[property];
  58         }
  59       }
  60       return this.animationTiming;
  61     },
  62
  63     /**
  64      * Sets `transform` and `transformOrigin` properties along with the prefixed versions.
  65      */
  66     setPrefixedProperty: function(node, property, value) {
  67       var map = {
  68         'transform': ['webkitTransform'],
  69         'transformOrigin': ['mozTransformOrigin', 'webkitTransformOrigin']
  70       };
  71       var prefixes = map[property];
  72       for (var prefix, index = 0; prefix = prefixes[index]; index++) {
  73         node.style[prefix] = value;
  74       }
  75       node.style[property] = value;
  76     },
  77
  78     /**
  79      * Called when the animation finishes.
  80      */
  81     complete: function() {}
  82
  83   };
  84
  85 </script>