/** * @private */Ext.define('Ext.fx.runner.CssAnimation', { extend: 'Ext.fx.runner.Css', constructor: function() { this.runningAnimationsMap = {}; this.elementEndStates = {}; this.animationElementMap = {}; this.keyframesRulesCache = {}; this.uniqueId = 0; return this.callParent(arguments); }, attachListeners: function() { this.listenersAttached = true; Ext.getWin().on({ animationstart: 'onAnimationStart', animationend: 'onAnimationEnd', scope: this }); }, onAnimationStart: function(e) { var name = e.browserEvent.animationName, elementId = this.animationElementMap[name], animation = this.runningAnimationsMap[elementId][name], elementEndStates = this.elementEndStates, elementEndState = elementEndStates[elementId], data = {}; //console.log("START============= " + name); if (elementEndState) { delete elementEndStates[elementId]; data[elementId] = elementEndState; this.applyStyles(data); } if (animation.before) { data[elementId] = animation.before; this.applyStyles(data); } }, onAnimationEnd: function(e) { var element = e.target, name = e.browserEvent.animationName, animationElementMap = this.animationElementMap, elementId = animationElementMap[name], runningAnimationsMap = this.runningAnimationsMap, runningAnimations = runningAnimationsMap[elementId], animation = runningAnimations[name]; //console.log("END============= " + name); if (animation.onBeforeEnd) { animation.onBeforeEnd.call(animation.scope || this, element); } if (animation.onEnd) { animation.onEnd.call(animation.scope || this, element); } delete animationElementMap[name]; delete runningAnimations[name]; this.removeKeyframesRule(name); }, generateAnimationId: function() { return 'animation-' + (++this.uniqueId); }, run: function(animations) { var data = {}, elementEndStates = this.elementEndStates, animationElementMap = this.animationElementMap, runningAnimationsMap = this.runningAnimationsMap, runningAnimations, states, elementId, animationId, i, ln, animation, name, runningAnimation, names, durations, easings, delays, directions, iterations; if (!this.listenersAttached) { this.attachListeners(); } animations = Ext.Array.from(animations); for (i = 0,ln = animations.length; i < ln; i++) { animation = animations[i]; animation = Ext.factory(animation, Ext.fx.Animation); elementId = animation.getElement().getId(); animationId = animation.getName() || this.generateAnimationId(); animationElementMap[animationId] = elementId; animation = animation.getData(); states = animation.states; this.addKeyframesRule(animationId, states); runningAnimations = runningAnimationsMap[elementId]; if (!runningAnimations) { runningAnimations = runningAnimationsMap[elementId] = {}; } runningAnimations[animationId] = animation; names = []; durations = []; easings = []; delays = []; directions = []; iterations = []; for (name in runningAnimations) { if (runningAnimations.hasOwnProperty(name)) { runningAnimation = runningAnimations[name]; names.push(name); durations.push(runningAnimation.duration); easings.push(runningAnimation.easing); delays.push(runningAnimation.delay); directions.push(runningAnimation.direction); iterations.push(runningAnimation.iteration); } } data[elementId] = { 'animation-name' : names, 'animation-duration' : durations, 'animation-timing-function' : easings, 'animation-delay' : delays, 'animation-direction' : directions, 'animation-iteration-count' : iterations }; // Ext.apply(data[elementId], animation.origin); if (animation.preserveEndState) { elementEndStates[elementId] = states['100%']; } } this.applyStyles(data); }, addKeyframesRule: function(name, keyframes) { var percentage, properties, keyframesRule, styleSheet, rules, styles, rulesLength, key, value; styleSheet = this.getStyleSheet(); rules = styleSheet.cssRules; rulesLength = rules.length; styleSheet.insertRule('@' + this.vendorPrefix + 'keyframes ' + name + '{}', rulesLength); keyframesRule = rules[rulesLength]; for (percentage in keyframes) { properties = keyframes[percentage]; rules = keyframesRule.cssRules; rulesLength = rules.length; styles = []; for (key in properties) { value = this.formatValue(properties[key], key); key = this.formatName(key); styles.push(key + ':' + value); } keyframesRule.insertRule(percentage + '{' + styles.join(';') + '}', rulesLength); } return this; }, removeKeyframesRule: function(name) { var styleSheet = this.getStyleSheet(), rules = styleSheet.cssRules, i, ln, rule; for (i = 0,ln = rules.length; i < ln; i++) { rule = rules[i]; if (rule.name === name) { styleSheet.removeRule(i); break; } } return this; }});