HTML and CSS Reference
In-Depth Information
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
Probieren Sie ein bisschen herum, bis Sie die richtige Animationsdauer und
Beschleunigungskurve erreicht haben. Länger als 1,5 Sekunden sollte Ihre Animation
aber nicht dauern, da dann das Element per JavaScript gelöscht wird. Ist Ihre Anima-
tion kürzer als 1,5 Sekunden, kann es passieren, dass das Element in seinen
Ursprungszustand zurückspringt - dies verhindern Sie mit
-webkit-animation-fill-
mode: forwards
.
7.3.4 Zusätzliche EventHandler
Bestimmt sind Sie schon fleißig dabei, Aufgaben anzulegen und abzuhaken. Ihnen ist
mit Sicherheit schon das ständige Hoch- und Runterfahren der Bildschirmtastatur
aufgefallen. Auch wenn die Tastatur sichtbar ist, können Sie durch die Liste scrollen
und Aufgaben abhaken - dies führt zu unerwünschten Effekten und einem ständigen
Springen in der Liste. Um dies zu verhindern, soll ein Antippen der Liste den Eingabe-
modus sofort beenden:
$('#add').find('input[name=add-task]').on('focus', function(){
$('#todo-liste').on('touchstart', function(){
$('#add').find('input[name=add-task]').blur();
$('#add').submit();
});
}).on('blur', function(){
$('#todo-liste').off('touchstart');
$('#add').submit();
});
Sie definieren per jQuery einen EventListener, der feststellt, ob der Fokus auf dem
Eingabefeld liegt, damit also auch die Tastatur sichtbar ist. Ist dies der Fall, wird wie-
derum die Liste mit einem EventListener verknüpft: Eine einfache Fingerberührung,
also ein
touchstart
, reicht, um dem Eingabefeld per
.blur()
den Fokus zu entziehen
und die Tastatur so verschwinden zu lassen.
In den folgenden Nutzertests werden Sie feststellen, dass sich Ihre WebApp nun viel
flüssiger und frustrationsfreier bedienen lässt. Es sind genau solche Details, die gute
von großartigen WebApps unterscheiden. Achten Sie daher so früh wie möglich auf
alle etwaigen Irritationen und »Fehlberührungen« - bevor sie sich daran gewöhnen.
Ähnliches gilt für das Eingabefeld: Damit Sie es richtig fokussieren können, müssen
Sie es »klicken«, also das Feld berühren, den Finger für einige Millisekunden ruhen
Search WWH ::
Custom Search