+CSS mehrere Umschalt-Klassen verwalten

[Deus Figendi]

Guten Morgen,
entsprechend diverser Empfehlungen aus dem self-Raum, dass "man das so macht" habe ich mir angewöhnt in meinem JavaScript üblicherweise wenn ich den Zustand (=Styles) von Elementen ändern möchte einfach die Klasse zu ändern und im zentralen Stylesheet eben die Unterschiede zu notieren.

Das klappt auch in aller Regel wunderbar, meisten geht es ums ein- und ausblenden.
Jetzt bin ich aber in der Situation, dass ich zwei Kriterien für Zustände habe, nämlich einmal eine Animation und Sichtbarkeit. Hier der relevante Code:

  
  
my_pelement = document.createElement("p");  
my_pelement.appendChild(document.createTextNode("foobar"));  
my_pelement.id = "pelement";  
  
 var style_content = "         \  
                               \  
 #pelement {                   \  
   font-size:200%;             \  
   width:600px;                \  
   text-align:right;           \  
                               \  
   -webkit-transition: all 0.8s ease-in-out; \  
   -moz-transition: all 0.8s ease-in-out;    \  
   -o-transition: all 0.8s ease-in-out;      \  
   transition: all 0.8s ease-in-out;         \  
 }                             \  
                               \  
 #pelement.supersize {         \  
   font-size:500%;             \  
   color:#F00;                 \  
 }                             \  
                               \  
 #pelement.pelement_visible {  \  
   display:block;              \  
 }                             \  
                               \  
 #pelement.pelement_invisible {\  
   display:none;               \  
 }                             \  
 ";  
  
 my_style_element = document.createElement("style");  
 my_style_element.type = "text/css";  
 my_style_element.appendChild(document.createTextNode(style_content));  
 document.getElementsByTagName("head")[0].appendChild(my_style_element);  
  
//und an anderer Stelle in einer Funktion...  
  
function eine_Funktion() {  
 if (!kl_ongoing || etwas_anderes_was_hier_keine_Rolle_spielt) {  
  kl_ongoing = true;  
  my_pelement.className = "supersize";  
  mklcnto = window.setTimeout("my_pelement.className = ''",1000);  
  klof = window.setTimeout("kl_ongoing = false",1200);  
 }  
}  

Soweit funktioniert das (meistens), wird die Funktion aufgerufen ändert sich die Klasse und das font-size ändert sich als Animation. Nachdem die abgelaufen ist (0.8s) wird die Klasse gelöscht (1s) und es wird "zurück animiert".
Das ganze soll nicht mehrfach laufen, wenn die Animation im Gange ist wird idR keine neue angefangen und falls doch eine neue angefangen wird, werden die Timeouts überschrieben(!), damit nicht zurück-animiert wird, bevor fertig hin-animiert wurde.
Soweit klappt das auch, zumindest im für mich benötigten Rahmen ^^ (manchmal zickt es doch noch rum).

Jetzt möchte ich aber das Element auch ausblenden können, daher...
some_checkbox.addEventListener("change", function() { my_pelement.className="pelement_"+this.checked?"visible":"invisible"; }, true);
Und da dürfte das Problem erkennbar werden, zwei verschiedene Funktionen (eine anonym) verändern die Klasse des gleichen Elements, ich habe also insgesamt vier Zustände.

Bekanntermaßen können Elemente ja durchaus mehrere Klassen haben, aber soweit mir bekannt werden sie immer als ein gemeinsamer String verwaltet.
Ich hoffe jetzt einfach mal, dass es eine mir unbekannte Methode gibt die Klassen auch als Array zu verwalten, dann wäre das Problem ja schon gelöst:

.classNameArray[0] = "supersize"; //oder "";  
.classNameArray[1] = "visible";    //oder "invisible";

Gibt es für dieses Problem eine fertige oder übliche Lösung oder sollte ich visible/invisible dann einfach doch über die .style.display (block/none) lösen? Wäre wohl dreckig, aber simpel.