1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-fx.target.ElementCSS'>/**
2 </span> * @class Ext.fx.target.ElementCSS
3 * @extends Ext.fx.target.Element
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.
9 Ext.define('Ext.fx.target.ElementCSS', {
11 /* Begin Definitions */
13 extend: 'Ext.fx.target.Element',
17 setAttr: function(targetData, isFirstFrame) {
23 ln = targetData.length,
33 for (i = 0; i < ln; i++) {
34 attrs = targetData[i];
35 duration = attrs.duration;
36 easing = attrs.easing;
39 if (Ext.Array.indexOf(cssArr.attrs, attr) == -1) {
40 cssArr.attrs.push(attr.replace(/[A-Z]/g, function(v) {
41 return '-' + v.toLowerCase();
43 cssArr.duration.push(duration + 'ms');
44 cssArr.easing.push(easing);
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;
54 ln2 = attrs[attr].length;
55 for (j = 0; j < ln2; 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]);
62 // Must trigger reflow to make this get used as the start point for the transition that follows
64 o = o[0].dom.offsetWidth;
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 });
78 });</pre></pre></body></html>