31 var parentNode = aNode.parentNode;
34 parentNode.removeChild(aNode);
44 var animationName =
"anim_" + anIdentifier,
49 console.warn(
"Animation " + anIdentifier +
" is already in use. Ignoring.");
53 this.target = aTarget;
55 this.targetName = aTargetName;
56 this.animationName = animationName;
58 this.styleElement = null;
59 this.propertyanimations = [];
60 this.animationsnames = [];
61 this.animationstimingfunctions = [];
62 this.animationsdurations = [];
64 this.didBuildDOMElements =
false;
75 return "<animation " + this.
identifier +
" target=" + this.targetName +
" properties=" + this.propertyanimations.map(
function(anim){
return anim.property;}).join(
",") +
" >";
78 CSSAnimation.prototype.addPropertyAnimation =
function(propertyName, valueFunction, aDuration, aKeyTimes, aValues, aTimingFunctions, aCompletionfunction)
84 var fullAnimationName = this.animationName + "_" + propertyName;
87 name: fullAnimationName,
88 property: propertyName,
89 valuefunction: valueFunction,
93 completionfunction: aCompletionfunction };
95 var animationTimingFunction;
97 if (aTimingFunctions && (aTimingFunctions[0] instanceof Array))
99 animation.keyframestimingFunctions = aTimingFunctions;
101 animationTimingFunction =
"linear";
105 animationTimingFunction =
"cubic-bezier(" + aTimingFunctions + ")";
108 this.animationstimingfunctions.push(animationTimingFunction);
110 this.propertyanimations.push(animation);
111 this.animationsnames.push(fullAnimationName);
112 this.animationsdurations.push(aDuration +
"s");
119 var keyframesRules = [];
121 var count = this.propertyanimations.length;
123 for (var i = 0; i < count; i++)
125 var animation = this.propertyanimations[i],
126 property = animation.property,
127 valuefunction = animation.valuefunction,
128 keytimes = animation.keytimes,
129 values = animation.values,
130 timingFunctions = animation.keyframestimingFunctions;
133 keytimescount = keytimes.length,
134 start_value = values[0];
136 for (var j = 0; j < keytimescount; j++)
138 var keytime = keytimes[j],
142 if (valuefunction !== null)
143 value = valuefunction(start_value, value);
145 var keyframeContent =
property +
": " + value +
";";
147 if (timingFunctions && timingFunctions.length && (timingFunction = timingFunctions[j]))
152 var keyframe =
"\t" + Math.round(keytime * 100) +
"% {\n\t\t" + keyframeContent +
"\n\t}\n";
154 keyframes.push(keyframe);
159 keyframesRules.push(rule);
162 return keyframesRules.join(
"\n");
169 nodeText = document.createTextNode(keyframesText);
171 styleElement.appendChild(nodeText);
172 document.head.appendChild(styleElement);
177 if (!this.styleElement)
179 var styleElement = document.createElement(
"style");
181 styleElement.setAttribute(
"type",
"text/css");
183 this.styleElement = styleElement;
186 return this.styleElement;
191 var animation =
this,
192 animationsNames = this.animationsnames,
193 inFlightAnimationsNames = animationsNames.slice();
195 if (!animation.listener)
197 var AnimationEndListener =
function(event)
199 var idx = inFlightAnimationsNames.indexOf(event.animationName);
202 inFlightAnimationsNames.splice(idx, 1);
204 if (inFlightAnimationsNames.length > 0)
207 for (var i = 0; i < animationsNames.length; i++)
209 var completion = animation.completionFunctionForAnimationName(animationsNames[i]);
215 var eventTarget =
event.target,
216 style = eventTarget.style;
223 style.removeProperty(
"-webkit-backface-visibility");
225 if (animation.animationstimingfunctions.length)
231 animation.listener = null;
236 console.warn(
"CSSAnimation.j - " + err);
240 this.listener = AnimationEndListener;
243 return this.listener;
246 CSSAnimation.prototype.completionFunctionForAnimationName =
function(aName)
248 var propanims = this.propertyanimations,
249 count = propanims.length;
253 var anim = propanims[count];
255 if (anim.name === aName)
256 return anim.completionfunction;
271 var style = this.target.style;
273 if (this.animationstimingfunctions.length)
281 style.setProperty(
"-webkit-backface-visibility",
"hidden");
292 this.didBuildDOMElements =
true;
297 if (this.propertyanimations.length === 0 ||
this.islive)
300 if (!this.didBuildDOMElements)
var ANIMATION_NAME_PROPERTY
function CPBrowserCSSProperty(aProperty)
FrameUpdater prototype identifier
CSSAnimation prototype endEventListener
CSSAnimation prototype addAnimationEndEventListener
var ANIMATION_FILL_MODE_PROPERTY
CSSAnimation prototype createKeyFramesStyleElement
var ANIMATION_TIMING_FUNCTION_PROPERTY
CSSAnimation prototype keyFrames
function CPBrowserStyleProperty(aProperty)
CSSAnimation prototype buildDOMElements
var ANIMATION_END_EVENT_NAME
CSSAnimation prototype appendKeyFramesRule
var ANIMATION_DURATION_PROPERTY
CSSAnimation prototype setTargetStyleProperties
var ANIMATION_KEYFRAMES_RULE