AngularJS-Tutorial-Serie: Teil 2 – Spiegeln von Kacheln mit CSS3-Animationen und AngularJS

Dieses AngularJS-Mini-Tutorial für Fortgeschrittene ist Teil 2 einer 5-teiligen Serie, in der Sie jeweils lernen, wie Sie etwas erstellen, das Sie auf Ihrer Webseite verwenden können. In diesem Tutorial lernen Sie, wie Sie mit AngularJS und CSS3 animierte Flip-Kacheln erstellen.

Andere Beiträge in der Serie:


Heute werde ich erklären, wie man mit CSS3-Animationen und AngularJS eine Flip-Kachel erstellt.

Wenn Sie Angular JS noch nie verwendet haben, verpassen Sie etwas. Sie können es überprüfen hier. Ich werde LESS CSS für einige der fortgeschritteneren CSS verwenden, da es uns ermöglicht, Herstellerpräfixe durch die Verwendung von LESS-Mixins vollständig zu ignorieren. Wenn Sie LESS CSS auch noch nie verwendet haben, schlage ich vor, dass Sie sich darüber informieren hier. Es lohnt sich auf jeden Fall, sich eine CSS-Sprache anzueignen, auch wenn es nicht LESS ist.

Angular JS ist großartig. Es ermöglicht dem Benutzer, die Notwendigkeit einer DOM-Manipulation innerhalb von Controllern fast vollständig zu beseitigen, und obwohl einige DOM-Manipulationen etwas notwendig sind, kann dieser Code in Direktiven gekapselt und in vielen Fällen vollständig eliminiert werden. Je weniger DOM-Zugriff, desto besser, da es ein einfaches Unit-Testing ermöglicht. Die Flip-Kachel, die wir heute erstellen werden, verwendet überhaupt keine DOM-Manipulation, also ist die Mission erfüllt. Wenn Sie die Art von Leser sind, der es nur von Anfang bis Ende in Aktion sehen möchte, habe ich eine Demo erstellt, die die Flip-Kacheln in Aktion zeigt. Sie können es überprüfen hier. Wenn Sie andererseits genau sehen möchten, wie ich das Ganze zusammengestellt habe und wie alles funktioniert, lesen Sie weiter!

Ich werde das Schreiben in ein paar verschiedene Abschnitte unterteilen. Zuerst das HTML. Es ist ziemlich einfach, aber ich werde jede der Angular JS-Anweisungen, die ich verwende, und was sie alle tun, durchgehen. Dann gehen wir durch den JavaScript-Code, der zeigt, wie ich Angular JS verwende, um die entsprechenden CSS-Klassen hinzuzufügen und zu entfernen, um die Animation auszuführen. Abschließend beschreibe ich, was ich mit den einzelnen CSS-Regeln mache, die tatsächlich bewirken, dass sich die Flip-Kacheln bewegen.

Notiz: Das hier gezeigte CSS stimmt möglicherweise nicht genau mit dem überein, was Sie auf der Demoseite sehen, da ich möchte, dass die Demo mit einem hübschen Styling zumindest halbwegs anständig aussieht. Größtenteils werde ich jedoch versuchen, das CSS im Tutorial so einfach wie möglich zu halten.

Der HTML-Code

Zuerst das HTML. Es verwendet ein paar benutzerdefinierte Anweisungen, auf die ich gleich noch eingehen werde.

Beispiel

<flipper flipped="flipped" horizontal>
  <front">
    the front!
  </front>
  <back>
    the back!
  </back>
</flipper>

<flipper flipped="flipped" vertical>
  <div class="front tile">
    the front!
  </div>
  <div class="back tile">
    the back!
  </div>
</flipper>

Flipper-Vorlage

<div class="flipper" ng-transclude ng-class="{ flipped: flipped }"></div>

Vordere Vorlage

<div class="front tile"></div>

Zurück Vorlage

<div class="back tile"></div>

Ok, hier ist ein paar Dinge los. Der erste ist, dass ich eine benutzerdefinierte Direktive („Flipper“) verwende, um den Flipper zu kapseln. Darüber hinaus enthält es zwei weitere benutzerdefinierte Anweisungen („front“ und „back“), in die wir unseren Inhalt einfügen können. Ich habe unoriginell “the front!” und “der Rücken!” für den Inhalt, aber Sie können dort alles einfügen, was Sie möchten, natürlich auch mehr HTML-Tags. Wir werden einige Konfigurationsoptionen für die Direktive festlegen, sodass der Inhalt in den vorderen und hinteren Tags auf magische Weise im gerenderten HTML erscheint. Darauf gehe ich weiter unten ein.

Das Flipper-Tag hat einige Attribute. Die erste ist „umgedreht“, was angibt, welche Angular-JS-Variable an den inneren Flipperbereich übergeben werden soll. Angular JS überwacht Änderungen an Variablen, die auf diese Weise übergeben werden, also müssen wir nur unsere Direktivenvorlage verdrahten, um gegebenenfalls eine CSS-Klasse anzuwenden. Das zweite ist das „horizontale“ oder „vertikale“ Tag, das angibt, in welche Richtung die Kachel gedreht werden soll. Dies entspricht verschiedenen CSS-Klassen, die auf die Elemente angewendet werden, wenn sich die „umgedrehte“ Variable ändert.

Die Flipper-Direktive ist ebenfalls unkompliziert und verwendet einige von Angular erstellte Direktiven, nämlich ng-transclude und ng-class. Das ng-classDirektive gibt an, dass, wenn die „umgedrehte“ Variable wahr ist, die umgedrehte Klasse zum div hinzugefügt und entfernt werden sollte, wenn nicht. Die Direktive ng-transclude gibt an, dass der innere Inhalt dieses Tags der untergeordnete Inhalt des Tags sein soll, wie er auf dem übergeordneten Tag geschrieben ist. Dazu gehören die benutzerdefinierten Direktiven vorne und hinten, die zwei separate benutzerdefinierte Direktiven sind. Das „Front“-Tag enthält Inhalte, die auf der Vorderseite der Kachel erscheinen sollten, während das „Back“-Tag wenig überraschend Inhalte enthält, die angezeigt werden, sobald die Kachel umgedreht wurde. Sie können hier alles einfügen, was Sie wollen, sei es HTML oder Text. In dem Beispiel habe ich einen Indikatortext drin. Notiz: Sie können zwar fast jeden formatierten HTML-Code in diese Kacheln einfügen, stellen Sie jedoch sicher, dass Sie mit verschachtelten Elementen keine absolute Positionierung vornehmen. Die Vorder- und Rückseite der Kachel sind absolut positioniert, so dass das Hinzufügen von mehr davon die Sache komplizierter macht.

JavaScript

Hier passiert die ganze Magie von Angular JS. Ich füge das Ganze hier ein, einschließlich der App-Initialisierung sowie des benutzerdefinierten Direktivencodes.

var app = angular.module("demo", []);

app.controller("flipperDemo", function($scope) {
  $scope.flipped = false;

  $scope.flip = function() {
    $scope.flipped = !$scope.flipped;
  };
});

app.directive("flipper", function() {
  return {
    restrict: "E",
    template: "<div class="flipper" ng-transclude ng-class="{ flipped: flipped }"></div>",
    transclude: true,
    scope: {
      flipped: "="
    }
  };
});

app.directive("front", function() {
  return {
    restrict: "E",
    template: "<div class="front tile" ng-transclude></div>",
    transclude: true
  };
});

app.directive("back", function() {
  return {
    restrict: "E",
    template: "<div class="back tile" ng-transclude></div>",
    transclude: true
  }
});

Ich gehe davon aus, dass der Leser zumindest einigermaßen damit vertraut ist, wie man eine Angular JS-App einrichtet, aber der Code ist sowieso da oben. Sie müssen auch angeben ng-app="demo" auf Ihrem HTML-Tag (sehen Sie sich die Beispielseitenquelle an, um dies in Aktion zu sehen). Der Controller, den ich eingerichtet habe, enthält nur eine einzige Scope-Variable: flipped. Dies ist die Variable, auf die die Flipper-Direktive zugreifen muss, um ihren inneren Zustand zu bestimmen, insbesondere, ob die vordere oder die hintere Kachel angezeigt werden soll. Es legt auch eine Methode im Controllerbereich fest, flip, die die umgedrehte Variable umschaltet. Es ist zunächst auf „false“ gesetzt, was bedeutet, dass die Kachel standardmäßig die Vorderseite anzeigen soll.

Dann haben wir die drei Direktiven. Die Flipper-Direktive ist die komplizierteste, aber dennoch unkompliziert. Zunächst beschränke ich diese Direktive auf ein Element. Angular JS-Direktiven können in verschiedenen Formen erscheinen, einschließlich eines Elements (HTML-Tag), eines Attributs und eines Klassennamens. In diesem Fall macht das Element am meisten Sinn, also geben wir das mit einem „E“. Als nächstes legen wir die Vorlage für den Flipper fest. Da die Vorlage des Flippers nur eine einzelne Zeile ist, habe ich mich dafür entschieden, dies inline in die Direktivendefinition einzufügen, aber für kompliziertere Direktiven ist es am besten, dies in eine separate Datei zu verschieben. Sie müssen sich ändern “template” zu “templateUrl“, damit das jedoch funktioniert. Das “transclude“ Option gibt an, dass wir die untergeordneten Elemente (oder den Text) nehmen und in das Element einfügen möchten, das mit dem „ng-transclude”-Attribut, das Sie im Vorlagentext sehen können. Wir erstellen einen isolierten Bereich mit nur einer einzigen umgedrehten Variablen. Das Gleichheitszeichen zeigt an, dass es sich um eine bidirektionale Bindung handelt, was bedeutet, dass wir den Wert aus dem übergeordneten Gültigkeitsbereich lesen und bei Bedarf auch festlegen können.

Die front- und back-Direktiven sind noch einfacher als der Flipper und enthalten nur einen einzigen Unterschied: die front- oder back-CSS-Klasse. Beachten Sie, dass sie auch Transklusion verwenden, um untergeordnete Elemente im erstellten HTML zu rendern.

CSS

.tile { color:white; padding:15px; box-sizing:border-box; -moz-box-sizing:border-box; }
    
flipper {
    float:left;
    width:250px;
    height:250px;
    margin-right:15px;
    display:block;
    perspective:1000;
    
    span {
        color:white;
    }
    
    >div.flipper {
        float:left;
        width:100%;
        height:100%;
        position:relative;
        transform-style:preserve-3d;
        
        .front, .back {
            float:left;
            display:block;
            width:100%;
            height:100%;
            backface-visibility:hidden;
            position:absolute;
            top:0;
            left:0;
            transform-style:preserve-3d;
            transition:transform ease 500ms;
        }

        .front {
            z-index:2;
            background:#19489E;

            /* front tile styles go here! */
        }

        .back {
            background:#9E1919;

            /* back tile styles go here! */
        }
    }
}

flipper[horizontal] {
    .front {
        transform:rotateY(0deg);
    }

    .back {
        transform:rotateY(-180deg);
    }

    div.flipper.flipped {
        .front {
            transform:rotateY(180deg);
        }

        .back {
            transform:rotateY(0deg);
        }
    }
}

flipper[vertical] {
    .front {
        transform:rotateX(0deg);
    }

    .back {
        transform:rotateX(-180deg);
    }

    div.flipper.flipped {
        .front {
            transform:rotateX(180deg);
        }

        .back {
            transform:rotateX(0deg);
        }
    }
}

Ich habe der Kürze halber einige der herstellerspezifischen CSS-Regeln weggelassen. Die Demoseite enthält jedoch die vollständigen CSS-Regeln, damit der Flipper in allen Browsern funktioniert. Wenn Sie sie also sehen müssen, sehen Sie sich diese an. Sie werden feststellen, dass ich auf meine benutzerdefinierten Anweisungen im CSS verweise, was kein Problem darstellt. Dem Browser ist es egal, welches HTML-Tag wir verwenden, und er wendet Stile unabhängig davon an.

Es gibt ein paar ausgefallene CSS-Regeln, die hier im Spiel sind. Ich werde sie alle durchgehen und beschreiben, was sie tun.

  • Transformationsstil Die Transformationsstilregel gibt wenig überraschend einen Stil für die Transformation an. In diesem Beispiel interessiert uns nur der Wert „preserve-3d“, der angibt, dass alle verschachtelten Elemente ihren Rendering-Stil in der dritten Dimension beibehalten sollen. Es bedeutet nichts ohne die Transformations-CSS-Regel, die wir auch verwenden. Dies gibt die Illusion, dass die Kacheln umgedreht werden. Ohne sie scheint die Kachel zu schrumpfen und zu wachsen, anstatt sich in 3D umzudrehen.
  • Perspektive Dies definiert, wo die Orientierung und Distanz des Betrachters von der 3D-Transformation ist. Das klingt ein wenig seltsam, aber im Grunde definiert es die Anzahl der Pixel, die das gerenderte Element von der Ansicht ist.
  • Rückseitensichtbarkeit Diese Eigenschaft gibt den Sichtbarkeitsstatus der Rückseite von Elementen an. Dies macht für statische Elemente auf einer Seite keinen Sinn, aber in unserem Fall ist es wichtig, die Rückseite auszublenden, damit wir keine umgedrehte Version der Kachel sehen. In unserem Beispiel wird der Text „the front!“ ist sowohl auf der Vorder- als auch auf der Rückseite der Fliese aufgedruckt. Wenn wir diese Eigenschaft auf hidden setzen, ist nur die Vorderseite sichtbar.

Fazit

Und das ist es! Danke fürs Lesen. Noch einmal, wenn Sie diese Flip-Kacheln in Aktion sehen möchten, können Sie einen Blick auf die Demo-Seite werfen hier.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *