extlib/leaflet/src/dom/transition/Transition.Native.js

   1 /*
   2  * L.Transition native implementation that powers Leaflet animation
   3  * in browsers that support CSS3 Transitions
   4  */
   5
   6 L.Transition = L.Transition.extend({
   7         statics: (function() {
   8                 var transition = L.DomUtil.TRANSITION,
   9                         transitionEnd = (transition == 'webkitTransition' || transition == 'OTransition' ?
  10                                 transition + 'End' : 'transitionend');
  11
  12                 return {
  13                         NATIVE: !!transition,
  14
  15                         TRANSITION: transition,
  16                         PROPERTY: transition + 'Property',
  17                         DURATION: transition + 'Duration',
  18                         EASING: transition + 'TimingFunction',
  19                         END: transitionEnd,
  20
  21                         // transition-property value to use with each particular custom property
  22                         CUSTOM_PROPS_PROPERTIES: {
  23                                 position: L.Browser.webkit ? L.DomUtil.TRANSFORM : 'top, left'
  24                         }
  25                 };
  26         })(),
  27
  28         options: {
  29                 fakeStepInterval: 100
  30         },
  31
  32         initialize: function(/*HTMLElement*/ el, /*Object*/ options) {
  33                 this._el = el;
  34                 L.Util.setOptions(this, options);
  35
  36                 L.DomEvent.addListener(el, L.Transition.END, this._onTransitionEnd, this);
  37                 this._onFakeStep = L.Util.bind(this._onFakeStep, this);
  38         },
  39
  40         run: function(/*Object*/ props) {
  41                 var prop,
  42                         propsList = [],
  43                         customProp = L.Transition.CUSTOM_PROPS_PROPERTIES;
  44
  45                 for (prop in props) {
  46                         if (props.hasOwnProperty(prop)) {
  47                                 prop = customProp[prop] ? customProp[prop] : prop;
  48                                 prop = prop.replace(/([A-Z])/g, function(w) { return '-' + w.toLowerCase(); });
  49                                 propsList.push(prop);
  50                         }
  51                 }
  52
  53                 this._el.style[L.Transition.DURATION] = this.options.duration + 's';
  54                 this._el.style[L.Transition.EASING] = this.options.easing;
  55                 this._el.style[L.Transition.PROPERTY] = propsList.join(', ');
  56
  57                 for (prop in props) {
  58                         if (props.hasOwnProperty(prop)) {
  59                                 this._setProperty(prop, props[prop]);
  60                         }
  61                 }
  62
  63                 this._inProgress = true;
  64
  65                 this.fire('start');
  66
  67                 if (L.Transition.NATIVE) {
  68                         this._timer = setInterval(this._onFakeStep, this.options.fakeStepInterval);
  69                 } else {
  70                         this._onTransitionEnd();
  71                 }
  72         },
  73
  74         _onFakeStep: function() {
  75                 this.fire('step');
  76         },
  77
  78         _onTransitionEnd: function() {
  79                 if (this._inProgress) {
  80                         this._inProgress = false;
  81                         clearInterval(this._timer);
  82
  83                         this._el.style[L.Transition.PROPERTY] = 'none';
  84
  85                         this.fire('step');
  86                         this.fire('end');
  87                 }
  88         }
  89 });