"transition"-Animation wird ungewollt bei Seitenaufruf ausgeführt

[j-l-n]

http://www.developer.julian-jp.tk/?dir=css_problem-transititon

Im Stylesheet habe ich unter anderem

-webkit-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;

notiert. Und zwar für einen weichen Übergang, wenn ich z.B. die Radio-Button-Auswahl wechsle, dass die Markierung nicht einfach zum anderen überspringt, sondern bei der vorherigen langsam ausblendet und bei der neuen einblendet.
Jedoch wird nun beim Laden der Seite auch die Designänderung vom browserdefinierten Standard-Aussehen der Elemente zu dem im CSS definierten Aussehen verzögert. Wie verhindere ich dies?

 

[kkapsner]

Das scheint nur im Chrome so zu sein.

Aber ich würde prinzipiell immer nur das animieren, was du auch animiert haben willst. Also anstatt dem "all" z.B. "background-image".

Du könntest mal probieren, ob das Problem verschwindet, wenn du im CSS zuerst die Definitionen machst und dann erst am Ende die transition-Anweisung schreibst.

 

[j-l-n]

Mir ist gerade noch etwas sehr seltsames aufgefallen: lasse ich den <form>-Tag weg, erfolgt keine Animation beim Seitenaufruf. Schau mal oben, ich hab eine zweite Version ohne diesen hochgeladen.
Problem: ich brauche das <form> natürlich, um die Eingaben absenden zu können, von daher kann ich es nicht einfach weglassen...

 

[kkapsner]

Sehr komisch... klingt irgendwie scho wieder nach einem Bug. Du könntest die transition-Anweisungen auch mit JS im window.onload setzten... aber wirklich elegant ist das nicht.

Probier' noch mal aus, ob es hilft, wenn du die transition in eine separate Regel oder sogar in eine separate Datei setzt.

 

[j-l-n]

Du könntest die transition-Anweisungen auch mit JS im window.onload setzten... aber wirklich elegant ist das nicht.

Folgendes funktioniert nicht:

function loadCSSAnimation(){
  document.getElementById("password").style.setAttribute("transition", "all 0.50s ease-in-out");
  alert("style set.");
}

 

[kkapsner]

Äh... da sollte was in der Fehlerkonsole stehen... das .style-Objekt hat keinen .setAttribute()-Methode...

Prinzipiell ist .setAttribute sowieso nicht gut bei Standardattributen.

document.getElementById("password").style.transition = "all 0.50s ease-in-out";

 

[j-l-n]

das .style-Objekt hat keinen .setAttribute()-Methode...

Hm, dann war ich da falsch informiert. Hier wurde das nämlich auch so gemacht: SELFHTML: JavaScript / Objektreferenz / style / setAttribute()
element.style.setAttribute() vs. element.attribute = '' - Stack Overflow

 

[kkapsner]

SELFHTML: JavaScript / Objektreferenz / style / setAttribute()

Da steht auch explizit, dass das eine MS-Erweiterung ist...

 

[dertypdernixkan]

wo und wie hast du es denn definiert? ich sehe auf deiner seite sicher nicht das worum es geht....

 

[j-l-n]

Da steht auch explizit, dass das eine MS-Erweiterung ist...

Oh Mist, stimmt. Schande über mich, ich hab den unteren Absatz tatsächlich nicht gelesen...

wo und wie hast du es denn definiert? ich sehe auf deiner seite sicher nicht das worum es geht....

Hab oben den Link aktualisiert. Hatte die Projektdateien eigentlich schon entfernt gehabt...

 

[j-l-n]

Frage: wie gehe ich mit den browserspezifischen CSS-Präfixen um?
EDIT: Hab selbst die Lösung gefunden: How to set the style -webkit-transform dynamically using Javascript? - Stack Overflow
Thema ist damit gelöst!

 

[kkapsner]

Generell ist bei Styleattributen die Umformung so, dass ein Hyphen ("-") mit dem folgenden Buchstaben zu einem Großbuchstaben gemacht werden:

var name = "-moz-was-auch-immer".replace(/\-(\w)/g, function(m, c){
	return c.toUpperCase();
});