What is the bet method of manipulating Classes for css animations via Javascript asa keyfame alternative

Question

What is the bet method of manipulating Classes for css animations via Javascript asa keyfame alternative..

Hi peeps, Any help will be appreciated.. Iv'e been trying to get css animation transformation (@keyframes) with javascript control in a manner I can get my head round. It occured to me that the the only listener that might be needed is already included (tranisionend). The coding I used is below.(a simple example: as a basis for more complex where css3 animations will be required).

Code

var classalt=0;  var altidx=0;   var  transEnd = 'transitionend    webkitTransitionEnd oTransitionEnd otransitionend';
function animastage() {classalt=(altidx%2); var eaidx=parseInt(altidx/2);
   if(classalt<1) { 
     if(eaidx==0) {$('.elealt').css({'background':'yellow', left:200+'px'}); }
 if(eaidx==1) {$('.elealt').css({background:'green', left:0+'px'});}
     $('#elemidX').addClass('elealt'); }         
   if(classalt>0) {
   if(eaidx==0) {$('#elemidX').css({background:'blue', top:200+'px'});}
 if(eaidx==1) {$('#elemidX').css({background:'red',    left:300+'px',top:90+'px'});} /*Back To Start*/
   $('#elemidX').removeClass('elealt');}
   if(altidx==4) {return} /*Remove This line for continuation*/
 altidx=(++altidx%5); /*Index to next Stage */
$('#elemidX').one(transEnd, function()  { setTimeout('animastage()',10);});

HTML

<span id='dummy' class='elealt'></span>
<div id='elemidX' class='origelx'></div>
<div  class="button" onclick='animastage()'>Try</div>

And CSS

/* Element to be Animated - initial position */
.origelx   position:absolute;left:300px;top:90px;width:25px;height:25px
    ;background:red;transition: all 1s linear;}
.elealt {left:0;top:0;background:yellow;}
 #dummy {display:none} /*?? Im order that .elealt is recognised*/

The problem however is changing the class properties as in a previous post:- Modifying CSS class property values on the fly with JavaScript / jQuery

In this case however it is required that both the added class and the original class need be modified(unless there is an alternative suggestion). The reason I didnt bin my approach which I think is easy, if functional, is that the solution by Tejs Ref '2' to the previous post held some promise. Is there a quick fix I am missing.

See the solution I came Up with below

score 0 · Answer 1 · answered Jan 15 '14 at 22:23

Thanks guys, a bit keen, needed a couple of minutes to get the post together. — Roger Kerr, Jan 15 '14 at 22:46

Roger Kerr · Answer 2 · 2014-01-17T12:35:49.170

Back again, Hope its Ok to answer my own question, however I believe I've now got a solution. The following (that works a treat) maybe a help to someone - any simpler solutions will still welcome!

CSS Nb : The Last Is As The Original class

* {margin:0px;padding:0px;border:none;}
.button { cursor:pointer;   padding:4px 12px;  border:1px solid gray;display:inline-block;}

/* Element to be Animated - initial position */
#elemidX {position:absolute;width:25px;height:25px;transition: all 2s linear;}
.eleorg {background:red;left:200px;top:90px;}

.stg1 {background:yellow;left:90px;top:90px;}
.stg2 {background:green;left:90px;top:200px;}
.stg3 {background: blue; left:200px;top:200px;}
.stg0 {background:red;left:200px;top:90px;}

HTML

<div id='elemidX' class='eleorg stg1 stg2 stg3 stg0'></div>

<div  class="button" onclick='aniloc=0;animastage()'>Try</div>
<div  class="button" onclick='aniloc=1;'>Stop</div>

And the Code

var  transEnd = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend';  /*Shorthand Ref*/
var stgs=[]; var stgix=0; var totix=0;  var aniloc=0;  currcl=''; /*Initiate*/

function animastage() {stgix=totix%mxstgs; totix++; var  nucls=stgs[stgix];  
    $('#elemidX').removeClass(currcl).addClass(nucls).one(transEnd, function()  {
  currcl=nucls;  if(aniloc>0) {return;} /*External Stop Animation*/ 
   /*Can do things here based on stgix or totix :synchronise other ellements etc*/  
 setTimeout('animastage()',30); }); }

 $( document ).ready(function() {
stgs=$('#elemidX').attr('class').split(/\s/);  stgs.shift(); mxstgs=stgs.length; currcl=stgs[mxstgs-1];
  var  cls=stgs.join(' ');  $('#elemidX').removeClass(cls).addClass(currcl);    /*retained classes .eleorg and .stg0*/  });

Regards

What is the bet method of manipulating Classes for css animations via Javascript asa keyfame alternative

2 Answers2