PDA

View Full Version : I want to change ".restart" CSS.



shinriyo
7 Feb 2012, 5:48 AM
Hi there

Sencha Animator always create ".restart" code for avoiding flicking.
But, I want to change ".restart" CSS's transform dynamically.

Could you tell me how to create dynamically ".restart" code?

For example I want to create below


.restart #AN-sObj-52768 { -webkit-transform: translate3d(100px, 15px, 0) scale3d(1.3, 1.3, 1); opacity: 1;}


I tried code below, but, I can't.:((


var doc = document;
var css_animation = doc.createElement('style');
css_animation.type = 'text/css';
var text_node = '.restart #AN-sObj-52768 { -webkit-transform: translate3d(100px, 15px, 0) scale3d(1.3, 1.3, 1); opacity: 1;}';

var rules = doc.createTextNode(text_node);
css_animation.appendChild(rules);

shinriyo
7 Feb 2012, 9:06 PM
I tried these ways later. but I couldn't :(

I put them after the code before


var element = document.getElementById("AN-sObj-52768");
element.className = 'restart';




var element = document.getElementById("AN-sObj-52768");
element.setAttribute('class', 'restart');


I also tried, but not work


var element = document.getElementById("AN-sObj-52768");
element.cssText = '.restart #AN-sObj-52768 { -webkit-transform: translate3d(100px, 15px, 0) scale3d(1.3, 1.3, 1); opacity: 1;}';

shinriyo
8 Feb 2012, 12:54 AM
I just could overwrite new CSS.


var element = document.getElementById("AN-sObj-52768");
debug.console("BEFORE" + element.cssText);

document.styleSheets[1].insertRule('.restart #AN-sObj-52768 { -webkit-transform: translate3d(100px, 15px, 0) scale3d(1.3, 1.3, 1); opacity: 1;}', 3);

element = document.getElementById("AN-sObj-52768");
debug.console("AFTER" + element.cssText);


but, I couldn't apply ".restart" animation :(

I also write the code but I couldn't


var scene_element = doc.getElementById("AN-sObj-scene-2");
scene_element.setAttribute('class','restart');

arnebech
8 Feb 2012, 7:27 AM
In your first post you need to append the style element (named "css_animation") to the document e.g.



document.getElementsByTagName('head')[0].appendChild(css_animation);