Offline – damit eine App in jedem Winkel der Welt funktioniert - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 286

Abbildung 7.11 Ihre fertige Todo-App unter Android
Im Prinzip sind Sie jetzt fertig (Abbildung 7.10 und Abbildung 7.11). Sie haben eine
vollständige Todo-App erstellt, die, wenn Sie einmal komplett in den Speicher des
Geräts geladen wurde und unabhängig von einer Internetverbindung, funktioniert.
Sie speichert zudem Aufgaben auf dem Gerät, bietet die Möglichkeit, Dinge abzuha-
ken, und vergisst auch beim Beenden keine Todos. Als Perfektionist wollen Sie dem
Nutzer aber ein besonderes Erlebnis bereiten: Wie bereits erwähnt, sollen die Listen-
einträge beim Abhaken mit einer kleinen Animation »aus der Liste fliegen«, bevor sie
gelöscht werden.
7.3.3 Funktionsbezogene Animation
Genau für solche Effekte verwenden Sie, wie gewohnt, CSS3-Animationen. Ihre erle-
digte Aufgabe soll beim Abhaken nach rechts aus dem Gerät geschoben werden und
verschwinden (Abbildung 7.12). Damit dies etwas realistischer aussieht, nimmt das
Element erst etwas »Anlauf«, also macht eine kleine Bewegung nach links, bevor es
aus dem rechten Bildschirmrand heraus verschwindet. Legen Sie dazu, wie in Kapitel
4, »HTML5 als Designwerkzeug«, beschrieben, einen Keyframe-Satz an: