<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-fx-target-ElementCSS'>/**
|
</span> * @class Ext.fx.target.ElementCSS
|
*
|
* This class represents a animation target for an {@link Ext.Element} that supports CSS
|
* based animation. In general this class will not be created directly, the {@link Ext.Element}
|
* will be passed to the animation and the appropriate target will be created.
|
*/
|
Ext.define('Ext.fx.target.ElementCSS', {
|
|
/* Begin Definitions */
|
|
extend: 'Ext.fx.target.Element',
|
|
<span id='Ext-fx-target-ElementCSS-method-setAttr'> /* End Definitions */
|
</span>
|
setAttr: function(targetData, isFirstFrame) {
|
var cssArr = {
|
attrs: [],
|
duration: [],
|
easing: []
|
},
|
ln = targetData.length,
|
attributes,
|
attrs,
|
attr,
|
easing,
|
duration,
|
o,
|
i,
|
j,
|
ln2;
|
for (i = 0; i < ln; i++) {
|
attrs = targetData[i];
|
duration = attrs.duration;
|
easing = attrs.easing;
|
attrs = attrs.attrs;
|
for (attr in attrs) {
|
if (Ext.Array.indexOf(cssArr.attrs, attr) == -1) {
|
cssArr.attrs.push(attr.replace(/[A-Z]/g, function(v) {
|
return '-' + v.toLowerCase();
|
}));
|
cssArr.duration.push(duration + 'ms');
|
cssArr.easing.push(easing);
|
}
|
}
|
}
|
attributes = cssArr.attrs.join(',');
|
duration = cssArr.duration.join(',');
|
easing = cssArr.easing.join(', ');
|
for (i = 0; i < ln; i++) {
|
attrs = targetData[i].attrs;
|
for (attr in attrs) {
|
ln2 = attrs[attr].length;
|
for (j = 0; j < ln2; j++) {
|
o = attrs[attr][j];
|
o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionProperty', isFirstFrame ? '' : attributes);
|
o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionDuration', isFirstFrame ? '' : duration);
|
o[0].setStyle(Ext.supports.CSS3Prefix + 'TransitionTimingFunction', isFirstFrame ? '' : easing);
|
o[0].setStyle(attr, o[1]);
|
|
// Must trigger reflow to make this get used as the start point for the transition that follows
|
if (isFirstFrame) {
|
o = o[0].dom.offsetWidth;
|
}
|
else {
|
// Remove transition properties when completed.
|
o[0].on(Ext.supports.CSS3TransitionEnd, function() {
|
this.setStyle(Ext.supports.CSS3Prefix + 'TransitionProperty', null);
|
this.setStyle(Ext.supports.CSS3Prefix + 'TransitionDuration', null);
|
this.setStyle(Ext.supports.CSS3Prefix + 'TransitionTimingFunction', null);
|
}, o[0], { single: true });
|
}
|
}
|
}
|
}
|
}
|
});</pre>
|
</body>
|
</html>
|
