move.js - "kleine JS Bibliothek" für CSS3 Animantionen

[tami]

hi,

http://visionmedia.github.io/move.js/

mfg

tami

[ralphi]

hi
link zeigt bei mir (firefox) nur:

Error 503 Backend is unhealthy

Viele Grüße aus LA

[tami]

hi,

hi
link zeigt bei mir (firefox) nur:

Error 503 Backend is unhealthy

Komisch, mein Firefox nicht. Liegt das daran, dass du in LA bist?

Viele Grüße aus LA

mfg

tami

[Gunnar Bittersmann]

@@tami:

nuqneH

http://visionmedia.github.io/move.js/

Und der Sinn dahinter, JS einzusetzen, wäre welcher?

Qapla'

[misterunknown]

Moin,

@@tami:

nuqneH

http://visionmedia.github.io/move.js/

Und der Sinn dahinter, JS einzusetzen, wäre welcher?

Wie würdest du denn einen Link beschreiben, der beim Anklicken ein Objekt bewegt - völlig ohne JS? Auch etwas, was setTimeout() ersetzen kann, ist mir bei CSS unbekannt.

Grüße Marco

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

Wie würdest du denn einen Link beschreiben, der beim Anklicken ein Objekt bewegt - völlig ohne JS?

Mit :focus und :target wäre da einiges möglich. Ansonsten: mit JS DOM ändern (Klassen etc.), den Rest erledigt CSS.

Auch etwas, was setTimeout() ersetzen kann, ist mir bei CSS unbekannt.

transition-delay; @keyframes

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Wie würdest du denn einen Link beschreiben, der beim Anklicken ein Objekt bewegt - völlig ohne JS?

Mit :focus und :target wäre da einiges möglich. Ansonsten: mit JS DOM ändern (Klassen etc.), den Rest erledigt CSS.

Soweit ich das bei einem nur flüchtigen Blick auf die minified Version gesehen habe, macht das Skript es genauso wie jQuery Animation, indem es die entsprechenden CSS Funktionen verwendet, sofern vom Browser unterstützt.

Das "Problem" ist halt nur, dass man CSS Sachen (unnötigerweise) von aktiviertem JS abhängig macht.

BTW: ':target' ist schei ... - da fehlt ein Attribut à la 'history="no"' für das 'A' Element.

Gruß Gunther

[molily]

Hallo!

BTW: ':target' ist schei ... - da fehlt ein Attribut à la 'history="no"' für das 'A' Element.

Ein solches Attribut existiert aus Gründen nicht. target heißt ja gerade: Wenn die URL ein Fragment Identifier enthält der Browser das entsprechende Element im Viewport fokussiert. Das Verlinken auf ein Fragment erzeugt natürlich immer einen History-Eintrag. Das ist eine Grundlage des Webs. (Klar, mit JavaScript und replaceState kann man das ggf. fälschen, aber nicht ohne.)

Natürlich ist :target ungeeignet für das Triggern von Animationen bei Elementen durch einen Klick, wenn obiges Verhalten unerwünscht ist. Insofern ist der Anwendungsbereich von :target ziemlich begrenzt.

Mathias

[Gunther]

Hallo Mathias!

BTW: ':target' ist schei ... - da fehlt ein Attribut à la 'history="no"' für das 'A' Element.

Ein solches Attribut existiert aus Gründen nicht. target heißt ja gerade: Wenn die URL ein Fragment Identifier enthält der Browser das entsprechende Element im Viewport fokussiert.

Das ist eine "mögliche" Betrachtungsweise. Eine andere ist, dass man sich bei der Einführung der Target-Pseudoklasse einfach an dem bereits Vorhandenen orientiert hat. Leider wie so oft, ohne es vernünftig zu Ende zu denken ...!

Denn Links, die den Browser veranlassen sollen zu einem Seitenanker zu springen, und Links, die dazu gedacht sind andere CSS Eigenschaften auf Elemente anzuwenden, sind imho zwei völlig verschiedene Paar Schuhe. Und aktuell bietet HTML eben genau keine Möglichkeit, zwischen diesen beiden Arten zu differenzieren.

Das Verlinken auf ein Fragment erzeugt natürlich immer einen History-Eintrag. Das ist eine Grundlage des Webs. (Klar, mit JavaScript und replaceState kann man das ggf. fälschen, aber nicht ohne.)

Das ist gar nicht nötig, denn wer trotz aktiviertem JS auf :target setzt, macht etwas grundlegend falsch.

Und wie man das "Problem" ganz einfach lösen/ umgehen könnte, habe ich ja schon geschrieben. Bei :hover käme ja auch keiner auf die Idee, dass das einen History-Eintrag erzeugt und zu dem jeweilige Element gescrollt wird ...!

Natürlich ist :target ungeeignet für das Triggern von Animationen bei Elementen durch einen Klick, wenn obiges Verhalten unerwünscht ist. Insofern ist der Anwendungsbereich von :target ziemlich begrenzt.

Es ist aber bei deaktiviertem JS oftmals die einzige Möglichkeit (z.B. Menü einblenden auf Touchscreens).
Zusätzlich wird der Anwendungsbereich von :target noch durch das Fehlen eines Parent-Selektors in CSS begrenzt.

Gruß Gunther

[molily]

Hallo,

Auch etwas, was setTimeout() ersetzen kann, ist mir bei CSS unbekannt.

transition-delay; @keyframes

Für einfache Animationen reichen transition bzw. @keyframes natürlich aus, dazu bedarf es keine Extrascripte, höchstens um eine Klasse zu umzuschalten.

Um komplexere Animationen zu schreiben, sind CSS Animations jedoch eine denkbar schlechte Sprache. Das kann man machen, aber verständlich, übersichtlich und wartbar ist der entstehende Code nicht. JavaScripte ermöglichen eine beliebige deklarative Syntax, die ohne Gerechne mit transition-delay auskommt. Das fragliche Script hat zumindest then() zur Verkettung, mit anderen lassen sich ganze Szenen, Hooks und Transitions definieren. Z.B. das Script hinter https://www.apple.com/de/mac-pro/.

Nicht-triviale Animationen kann man nicht von Hand verwalten, dafür werden entweder JavaScript-Frameworks oder Authoring-Tools wie Sencha Animator und Adobe Edge Animate verwendet. Letztere haben ein Interface wie Flash und erzeugen ein Gemisch aus @keyframes und JavaScript-Logik, welche CSS-Transitions und -Animationen triggert.

Grüße,
Mathias