src/fx/target/ElementCSS.js

   1 /**
   2  * @class Ext.fx.target.ElementCSS
   3  * @extends Ext.fx.target.Element
   4  *
   5  * This class represents a animation target for an {@link Ext.core.Element} that supports CSS
   6  * based animation. In general this class will not be created directly, the {@link Ext.core.Element}
   7  * will be passed to the animation and the appropriate target will be created.
   8  */
   9 Ext.define('Ext.fx.target.ElementCSS', {
  10
  11     /* Begin Definitions */
  12
  13     extend: 'Ext.fx.target.Element',
  14
  15     /* End Definitions */
  16
  17     setAttr: function(targetData, isFirstFrame) {
  18         var cssArr = {
  19                 attrs: [],
  20                 duration: [],
  21                 easing: []
  22             },
  23             ln = targetData.length,
  24             attributes,
  25             attrs,
  26             attr,
  27             easing,
  28             duration,
  29             o,
  30             i,
  31             j,
  32             ln2;
  33         for (i = 0; i < ln; i++) {
  34             attrs = targetData[i];
  35             duration = attrs.duration;
  36             easing = attrs.easing;
  37             attrs = attrs.attrs;
  38             for (attr in attrs) {
  39                 if (Ext.Array.indexOf(cssArr.attrs, attr) == -1) {
  40                     cssArr.attrs.push(attr.replace(/[A-Z]/g, function(v) {
  41                         return '-' + v.toLowerCase();
  42                     }));
  43                     cssArr.duration.push(duration + 'ms');
  44                     cssArr.easing.push(easing);
  45                 }
  46             }
  47         }
  48         attributes = cssArr.attrs.join(',');
  49         duration = cssArr.duration.join(',');
  50         easing = cssArr.easing.join(', ');
  51         for (i = 0; i < ln; i++) {
  52             attrs = targetData[i].attrs;
  53             for (attr in attrs) {
  54                 ln2 = attrs[attr].length;
  55                 for (j = 0; j < ln2; j++) {
  56                     o = attrs[attr][j];
  57                     o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionProperty', isFirstFrame ? '' : attributes);
  58                     o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionDuration', isFirstFrame ? '' : duration);
  59                     o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionTimingFunction', isFirstFrame ? '' : easing);
  60                     o[0].setStyle(attr, o[1]);
  61
  62                     // Must trigger reflow to make this get used as the start point for the transition that follows
  63                     if (isFirstFrame) {
  64                         o = o[0].dom.offsetWidth;
  65                     }
  66                     else {
  67                         // Remove transition properties when completed.
  68                         o[0].on(Ext.supports.CSS3TransitionEnd, function() {
  69                             this.setStyle(Ext.supports.CSS3Prefix + 'TransitionProperty', null);
  70                             this.setStyle(Ext.supports.CSS3Prefix + 'TransitionDuration', null);
  71                             this.setStyle(Ext.supports.CSS3Prefix + 'TransitionTimingFunction', null);
  72                         }, o[0], { single: true });
  73                     }
  74                 }
  75             }
  76         }
  77     }
  78 });