Javascript FadeIn / Element wird erst verzögert animiert

[winchester]

Hallo Leute,

Ich habe Contao etwas erweitert und stelle bei bestimmten Elementen die Option "animieren" zu Verfügung.

Zum Einsatz kommen:

Waypoint.js (damit kann man Elemente beeinflussen sobald Sie beispielsweise in den sichtbaren Bereich kommen)
animate.css
modernizr

Jetzt habe ich allerdings das Problem, dass meine Fallback variante zuerst erscheint bei Elementen die direkt beim laden der Seite schon sichtbar sind:


1) Modernzr prüft die Browserfähigkeiten, falls cssanimations unterstützt werden, wird dem HTML Tag die Klasse zugewiesen
1.1) ce_text animate hide (css Klassen) werden nur schlagend wenn sie Kind von html.cssanimations sind
2) Waypoint.js "sieht" das Element und fügt die Animations-Klasse hinzu

Jetzt habe ich das Problem dass das Element erscheint, dann hart ausgeblendet wird und dann sich animiert einblendet.

Gibt es einen solide Lösung dafür ohne dass ich auf den Fallback verzichten muss?
Ich möchte diesen gerne beibehalten weil sonst wären die Elemente auf hide gesetzt was natürlich ein Supergau wäre.

Ich hoffe ich konnte Ansatzweise Beschreiben wo mein Problem liegt

Viele Grüße

[pju]

modernizr fügt doch auch .no-featurex Klassen hinzu?
Also einfach im CSS Elemente generell ausblenden (ce_text animate hide), und dann bei .no-cssanimations einblenden?

[winchester]

Hy,

Das klingt gut - nur wie könnte ich dann das fallback lösen für deaktiviertes js?
no-js ist ja die erste klasse die vergeben wird oder ?

Viele Grüße

[pju]

Also ich würde erstmal versuchen, bei .no-js und .no-cssanimations einzublenden. Vielleicht reicht das schon aus.

Ansonsten schau mal hier, wie man das alternativ machen könnte. Alternativ mit Inline-JS die .no-js-Klasse entfernen, das geht schneller, als modernizr geladen ist.

[winchester]

ok aber no-js existiert ja von anfang an und wird erst dann ersetzt - somit könnte ja wieder der unerwünschte effekt auftreten denke ich.

Muss ich gleich mal ausprobieren.

[pju]

Hab meinen Post gerade angepasst, war etwas voreilig

[winchester]

Hy Pju,


Ich habe das nun relativ einfach gelöst (hat leider etwas gedauert):

Animieren hat nun 3 Optionen
1 Nicht animieren
2 animieren (löst sofortiges animieren mittels animate.css aus)
3 animieren beim erreichen des Viewports


Im Detail sieht das so aus (für interessierte)

1) ok das ist klar

2) hier wird einfach im Template eine Klasse dem umschließenden Element hinzugefügt "animated fadeInUp" - das Script dafür habe ich von Dan Eden und heißt animate.css
Der Vorteil ist, dass es mit den CSS Keyframes arbeitet - unterstützt ein Browser dies nicht dann ist dies zugleich das Fallback denn es wird weder animiert noch ausgeblendet.
Nachteil - es startet sofort und somit ist das nicht so toll wenn die Elemente "below the Fold" sind und beim scrollen schon fertig animiert sind

3) hier habe ich zusätzlich das Script waypoint.js im Einsatz das die Animationsklasse erst beim Erreichen des Elements (offset 200 px) hinzufügt.
Allerdings muss das Element zuvor auf hide (so heißt meine css Klasse) gesetzt werden welche wiederrum nur ausgeführt werden darf wenn der Browser csstransitions unterstützt und javascript eingeschaltet ist (sonst wird die klasse hide nie entfernt)

Vorteil: kann überall eingesetzt werden un blendet schön beim scrollen ein
Nachteil: ist es beim laden im sichtbaren Bereich erscheint das Element hart - blendet sich aus und faded dann wieder ein (es dauert einfach ein wenig bis JS die Klassen aktualisiert).


Ich hoffe das habe ich halbwegs verständlich erklärt - würd mich freuen wenn es jemanden hilft.
Falls die Lösung Mist ist, bin ich natürlich auch für euer Feedback dankbar.

Schönes Wochenende!