OPTEN, das einzige Umbraco-zertifizierte Unternehmen der Schweiz

HOW TO: Fehlgeschlagener Loginversuch mit CSS3 animieren

Seit ich mit CSS3 meine Animationen schreibe, bereitet mir das Ganze viel mehr Freude. Deshalb will ich euch etwas von meiner Leidenschaft für CSS3 mitgeben. Ich werde euch zeigen, wie ein fehlgeschlagenes Einloggen ziemlich schön dargestellt werden kann.

Schritt 1

Zuerst brauchen wir ein Formular. 

HTML:

<div class="container">
  <form>
    <h1>Login</h1>
    <input type="email" name="email" placeholder="E-Mail" />
    <input type="password" name="password" placeholder="Password" />
    <button>login</button>
  </form>
</div>

CSS:

.container {
  margin: 200px auto;
  width: 300px;
}

.container form {
  padding: 40px 25px 50px;
  background-color: #000;
}

.container form h1 {
  margin: 0 0 10px;
  color: #fff;
  text-align: center;
}

.container form input {
  padding: 0 0 0 5px;
  margin-bottom: 10px;
  height: 30px;
  border: none;
  width: 100%;
  box-sizing: border-box;
}

.container form button {
  width: 100%;
  border: none;
  height: 30px;
  background-color: #feed00;
}

Simpel, oder? Das kennen wir alle.

Schritt 2

Nun noch ein bisschen Javascript.

$('form').on("submit", function() {
  var $form = $(this),
        $email = $(this).find('input[name="email"]'),
        $password = $(this).find('input[name="password"]');

  // a realy save validation method
  if ($email.val().length > 0 && $password.val().length > 0) {
    // do crazy login stuff
    alert("Logged in");
  } else {
    // Add the error class
    $form.addClass("error");

    // remove the error class after the animation
    setTimeout(function() {
      $form.removeClass("error");
    }, 1000);
  }
  return false;
});

Wie ihr seht ist meine Securityrichtlinie ziemlich hoch! Doch um diesen Punkt geht es diesmal nicht. Wir reden heute über diese vier Linien:

// Add the error class
$form.addClass("error");

// remove the error class after the animation
setTimeout(function() {
  $form.removeClass("error");
}, 1000);

Ich füge bei einem gescheiterten Einloggen einfach eine CSS-Klasse hinzu. Ich entferne die Klasse jedoch nach einer Sekunde wieder. So wird die Animation nach einem weiteren Fehlversuch ausgeführt. Mit dieser Anweisung verschiebe ich die Animationen in das Stylesheet.

Schritt 3

Nun wollen wir uns der Animation widmen. Unsere Errorklasse sieht wie folgt aus:

.container form.error {

  /* define the keyframe animation */
  -webkit-animation-name: shake;
  animation-name: shake;

  /* here comes the duration from the animation */
  -webkit-animation-duration:1s;
  animation-duration:1s;
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }
}

Tada! Das ist alles.

Schritt 4

Falls ihr die alten Browser unterstützen müsst oder gar wollt, dann gibt es verschiedene Lösungsansätze. Zum einen gibt es den Modernizr. Der Modernizr überprüft Kompatibilität des Browsers.

if (modernizr.cssanimations) {
  $form.addClass("error");
} else {
  // Fallback for older browser
}

Da ich aber lieber in meinem CSS-File bin, bevorzuge ich einen anderen Lösungsansatz. Ich füge einfach diese vier Zeilen gleich nach dem Doctype hinzu und voilà! 

<!--[if lt IE 7]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>               <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>               <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

Nun könnt ihr im CSS euren Fallback erstellen.

.lt-ie9 .container form.error {
  border: 1px solid red;
}

Aber Halt!

Wiso trenne ich die Animationen von dem jQuery?

Die Antwort findet ihr hier: http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

Die Demo des Formulars findet ihr auf JSFiddle.

Und falls ihr Inspiration für coole CSS3-Animationen braucht:


kommentieren


0 Kommentar(e):