docs/source/ElementCSS.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-fx-target-ElementCSS'>/**
  19 </span> * @class Ext.fx.target.ElementCSS
  20  * @extends Ext.fx.target.Element
  21  *
  22  * This class represents a animation target for an {@link Ext.core.Element} that supports CSS
  23  * based animation. In general this class will not be created directly, the {@link Ext.core.Element}
  24  * will be passed to the animation and the appropriate target will be created.
  25  */
  26 Ext.define('Ext.fx.target.ElementCSS', {
  27
  28     /* Begin Definitions */
  29
  30     extend: 'Ext.fx.target.Element',
  31
  32     /* End Definitions */
  33
  34     setAttr: function(targetData, isFirstFrame) {
  35         var cssArr = {
  36                 attrs: [],
  37                 duration: [],
  38                 easing: []
  39             },
  40             ln = targetData.length,
  41             attributes,
  42             attrs,
  43             attr,
  44             easing,
  45             duration,
  46             o,
  47             i,
  48             j,
  49             ln2;
  50         for (i = 0; i &lt; ln; i++) {
  51             attrs = targetData[i];
  52             duration = attrs.duration;
  53             easing = attrs.easing;
  54             attrs = attrs.attrs;
  55             for (attr in attrs) {
  56                 if (Ext.Array.indexOf(cssArr.attrs, attr) == -1) {
  57                     cssArr.attrs.push(attr.replace(/[A-Z]/g, function(v) {
  58                         return '-' + v.toLowerCase();
  59                     }));
  60                     cssArr.duration.push(duration + 'ms');
  61                     cssArr.easing.push(easing);
  62                 }
  63             }
  64         }
  65         attributes = cssArr.attrs.join(',');
  66         duration = cssArr.duration.join(',');
  67         easing = cssArr.easing.join(', ');
  68         for (i = 0; i &lt; ln; i++) {
  69             attrs = targetData[i].attrs;
  70             for (attr in attrs) {
  71                 ln2 = attrs[attr].length;
  72                 for (j = 0; j &lt; ln2; j++) {
  73                     o = attrs[attr][j];
  74                     o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionProperty', isFirstFrame ? '' : attributes);
  75                     o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionDuration', isFirstFrame ? '' : duration);
  76                     o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionTimingFunction', isFirstFrame ? '' : easing);
  77                     o[0].setStyle(attr, o[1]);
  78
  79                     // Must trigger reflow to make this get used as the start point for the transition that follows
  80                     if (isFirstFrame) {
  81                         o = o[0].dom.offsetWidth;
  82                     }
  83                     else {
  84                         // Remove transition properties when completed.
  85                         o[0].on(Ext.supports.CSS3TransitionEnd, function() {
  86                             this.setStyle(Ext.supports.CSS3Prefix + 'TransitionProperty', null);
  87                             this.setStyle(Ext.supports.CSS3Prefix + 'TransitionDuration', null);
  88                             this.setStyle(Ext.supports.CSS3Prefix + 'TransitionTimingFunction', null);
  89                         }, o[0], { single: true });
  90                     }
  91                 }
  92             }
  93         }
  94     }
  95 });</pre>
  96 </body>
  97 </html>