Meinung zu Animation via CSS-Klassen?

[Matthias Scharwies]

Herzlich willkommen!

Ich brauche eigentlich weniger Hilfe als eine fachkundige Meinung.

Ich schreibe gerade an einem Javascript Minigame, in dem eine Figur mithilfe von CSS-Klassen navigiert, also in die Richtung

/* Objekt hat folgende Klasse */
.Anfangsposition {
	top: 10px;
	left: 10px;
}
/* Objekt hat folgende Klasse nicht */
.Endposition {
	top: 10px;
	left: 500px;
}

Das funktioniert ja, ist daher aus meiner Sicht ok. Andererseits sind das imho eher Daten, die ich irgendwo im JS definieren würde:

var	step = {
		  right: {
			  x: 50,
			  y: 0
				  },
       down: {
			  x: 0,
			  y: 50
			  };	

Dann tausche ich die Klassen aus, und das Objekt "fährt" auf der x-Achse nach rechts:

Diese Daten könntest Du dann in eine transform einsetzen:

Entweder per CSS oder mit der WAAPI (Web Animations API)

Siehe Beispiel Ball

Anstelle der festen Zahlenwerte im Beispiel könntest du deine Werte einsetzen:

var move = [
  { 
    transform: 'translate(0, 0)',
    background: 'green'    
  },
  { 
    transform: 'translate(' + step.right.x + 'px', + step.right.y + 'px')',
    background: 'lime'    
  },
  {
   transform: 'translate(0px, 0px)',
   background: 'lime'   
  }
];

Element.removeAttribute("class");
/* Element hat nur eine Klasse,
daher würde mir bei "classList.remove"
ein "totes" Class-Attribut übrigbleiben */

Element.classList.add("Endposition");

Das Klassen nicht immer verwendet werden, ist doch ok, ein leeres class="" im DOM ist imho legitim; ich würde aber doch die ganze transform in die Klasse schreiben und nicht nur die Positionen.

Stellst du Dein Projekt mal näher vor?

Herzliche Grüße

Matthias Scharwies