CSS-Transition mit JS auslösen

[TIMS_Ralf]

Hallo Leute,
habe ein Tab-Register dessen DIV-Contents mit CSS-transition "Opacity" langsam einblenden soll. Die Aktivierung des DIVs erfolgt mit mittels JS-funktion auf Tab-Register-Link:

function AktiviereTab(..........)
// ...
yRgCnt[pActRtrNr].className = "RgCntAct"; // Zuweisung CSS-Klasse bei Aktivierung (Click auf Tab)
yRgCnt[pActRtrNr].focus(); // Aktivierung des DIVs um Effekt auszulösen
//...

Die CSS:

.RgCnt /* DIV für inaktiven Tab-Content: */
{  display:none }

.RgCntAct /* DIV für aktivierter Tab-Content: */
{  opacity:0.3 /* Ausgangs-Status */ }

.RgCntAct:focus /* Klasse mit Effekt, sobald DIV mit JS .focus() aktiviert wird */
{ 
 opacity:1;
 -webkit-transition:opacity 1s ease-out;
 -moz-transition:opacity 1s ease-out;
 -o-transition:opacity 1s ease-out;
 transition:opacity 1s ease-out
}

Sonstige Infos:
Elegantes jQuery kann ich wg. anderer Gründe nicht einsetzen !
Das DIV enthält weitere komplexere Inhalte, die tlw. mit JS ( document.write() ) geschrieben wurden.

Problem / Frage:
Das yRgCnt[pActRtrNr].className = "RgCntAct" wird ausgeführt = das Content-DIV öffnet sich - OK. Das folgende yRgCnt[pActRtrNr].focus() zum Aktivieren der :focus-Klasse = transition-Effekt wird jedoch NICHT ausgeführt ( hab ich mit background:black getestet - null Reaktion). JS-Fehler gibts keine.

Wie bekomme ich den transition-opacity-Effekt bei Aktivierung eines Tabs mittels JS zum Laufen ?

Danke Euch vorab!
Grüße, Ralf

 

[hela]

Hallo,
die FOCUS-Eigenschaft kann man nur auf bestimmte Elemente anwenden, nachzulesen hier ("Anwendbar auf: ...").
Ein DIV-Element ist nicht dabei.

Nachtrag:
Im Beispiel von w3schools wird sie auf ein A-Element (Verweis) angewendet.

 

[TIMS_Ralf]

Auch hallo - und danke!

Aber wie bekomem ich es nun den transition-Effekt hin?

 

[hela]

... indem du deinen Fokus auf den "Tab-Register-Link" richtest.
Mehr kann man dazu nicht sagen, wenn man das Markup nicht kennt.