Von CSS Transitions hat sicher jeder schon mal gehört; es geht bei dieser Idee aus dem Hause Webkit darum, in CSS festzuschreiben, wie sich ein Element verhält, wenn sich seine CSS-Eigenschaften ändern. Das sieht dann so aus:
#foo { transition-property: opacity; transition-duration: 2s; }
Demnach würde, wenn man beim Element #foo
per Javascript den opacity
-Wert verändert, das ganze nicht auf einen Schlag passieren, sondern in Form eines weichen, zweisekündigen Übergangs. Der Haken an der Sache ist lediglich, dass sie außer Safari und Chrome kein Browser der Welt unterstützt. Die Lösung ist dieses nette jQuery-Script, das bei nichtunterstützenden Browsern die Transformationen per Javascript nachstellt. Das Ganze ist in seiner Funktionsweise recht komplex, aber es klappt offenbar. Also auf zum Download!
Quelle: Ajaxian
Kommentare (5)
Matthias Mees ¶
15. Januar 2009, 15:25 Uhr
Ich hatte, offen gestanden, noch nichts davon gehört.
Halte(t) mich für einen HTML-Taliban, aber sollte sowas nicht (Inhalt, Gestaltung, Verhalten) rein über JS gemacht werden?
Peter ¶
15. Januar 2009, 15:41 Uhr
Zitat Matthias Mees:
Dann sind CSS-Transitions doch genau das richtige. Per JS sagst du
und mit CSS ist festgelegt, wie der Übergang von der alten Farbe zu grün aussehen soll. Besser geht’s doch nicht.Bartek ¶
15. Januar 2009, 22:28 Uhr
Dem muss ich widersprechen. Finde das hat höchstens was in einem Konfigurationsblock innerhalb des Skriptes verloren und nicht im CSS.
Die Farbe könnte ich ja noch verstehen aber in deinem Beispiel ist die Dauer ja auch festgelegt und ich denke spätestens das gehört ausschließlich in die Programmlogik
Stell dir das doch mal nachher mal beim schreiben des Skriptes vor. Denke es ist recht nervig dauernd zwischen CSS und JS hin und her zu wechseln um grade sein fein tuning zu betreiben beim programmieren.
Nun ja, aber das wäre wohl verkraftbar und eher eine Ausrede für bequeme Coder wie mich denk ich.
Peter ¶
15. Januar 2009, 22:37 Uhr
Zitat Bartek:
Ich stelle mir das vor und frage mich, wie soll das kompliziert sein? Im Script sagt man, dass Aktion X stattfinden soll, im CSS, wie Aktion X aussehen soll. Das ist doch übersichtlich und obendrein auch noch logisch. In gutem HTML/CSS sind Inhalt und Darstellung schließlich auch getrennt, warum sollte das bei Verhalten und Darstellung anders sein? Sonst können wir doch auch gleich
<font>
wieder einführen ...rgb255 ¶
18. Januar 2009, 23:42 Uhr
Muss dem Peter Recht geben. Auch die Dauer des Effektes gehört zum Design und sollte im CSS definiert werden.