Αニματίαση AngularJS

Με τη βοήθεια του CSS, το AngularJS παρέχει μεταβατικές κινούμενες εικόνες.

Τι είναι η κινούμενη εικόνα;

Η κινούμενη εικόνα είναι η μεταβλητότητα του HTML στοιχείου που σας δίνει την εντύπωση κίνησης.

παράδειγμα

Επιλέξτε το κουτάκι για να κρύψετε το DIV:

<body ng-app="ngAnimate">
Κρύψτε το DIV：<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

Δοκιμάστε το Εκείνες τις Ημέρες

Η εφαρμογή δεν πρέπει να είναι γεμάτη με κινούμενες εικόνες, αλλά μερικές κινούμενες εικόνες μπορούν να κάνουν την εφαρμογή πιο εύκολα κατανοητή.

Τι χρειάζομαι;

Για να προετοιμάσετε την εφαρμογή σας για την κινούμενη εικόνα, πρέπει να περιλαμβάνετε τη βιβλιοθήκη AngularJS Animate:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

τότε, πρέπει να αναφέρετε το μονόπλευρο στην εφαρμογή σας. ngAnimate Μονόπλευρο:

<body ng-app="ngAnimate">

ή, αν η εφαρμογή σας έχει όνομα, μετακινήστε ngAnimate Προσθέστε ως εξαρτήσεις του μοντέλου της εφαρμογής:

παράδειγμα

<body ng-app="myApp">
<h1>Κρυφή DIV：<input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

Δοκιμάστε το Εκείνες τις Ημέρες

Τι κάνει το ngAnimate;

ngAnimate το μονόπλευρο προσθέτει και διαγράφει κλάσεις.

ngAnimate Το μονόπλευρο δεν κάνει τα στοιχεία HTML αнимικά, αλλά όταν ngAnimate Όταν παρατηρείτε ορισμένα γεγονότα (όπως η εμφάνιση ή η κρυφή ενός στοιχείου HTML), το στοιχείο αποκτά ορισμένες προκαθορισμένες κλάσεις που μπορούν να χρησιμοποιηθούν για την αнимάσεις.

Οι εντολές προσθήκης και διαγραφής κλάσεων στο AngularJS περιλαμβάνουν:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show και ng-hide εντολές προσθήκης και διαγραφής ng-hide Τιμές κλάσης.

οι άλλες εντολές θα προσθέσουν ng-enter τιμές κλάσης και θα προσθέσει ng-leave ιδιότητες.

Όταν το στοιχείο HTML αλλάζει θέσηng-repeat Η εντολή θα προσθέσει επίσης ng-move Τιμές κλάσης.

Επιπλέον, κατά τη διάρκεια της αнимάσεως, το στοιχείο HTML θα έχει ένα σύνολο τιμών κλάσης που θα διαγραφούν μετά την ολοκλήρωση της αнимάσεως. Για παράδειγμα:ng-hide Η εντολή θα προσθέσει αυτές τις τιμές κλάσης:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Αν θέλετε να κρύψετε το στοιχείο)
  • ng-hide-remove(Αν θέλετε να εμφανίσετε το στοιχείο)
  • ng-hide-add-active(Αν θέλετε να κρύψετε το στοιχείο)
  • ng-hide-remove-active(Αν θέλετε να εμφανίσετε το στοιχείο)

Ανάπτυξη αнимάσεων με CSS

Μπορούμε να χρησιμοποιήσουμε μεταβάσεις CSS ή αнимάσεις CSS για να προσθέσουμε αнимατικά εφέ στα στοιχεία HTML. Αυτό το μάθημα θα σας δείξει και τα δύο.

Για περισσότερες πληροφορίες σχετικά με τις CSS анимάσεις, παρακολουθήστε τα μαθήματα μας για μεταβάσεις CSS και αнимάσεις CSS.

Μετάβαση CSS

Η μετάβαση CSS επιτρέπει την ομαλή αλλαγή της τιμής μιας ιδιότητας CSS σε μια άλλη τιμή κατά τη διάρκεια μιας καθορισμένης χρονικής περιόδου:

παράδειγμα

όταν το στοιχείο DIV .ng-hide Όταν ο τύπος είναι, η μετάβαση θα διαρκέσει 0.5 δευτερόλεπτα, η ύψος θα περάσει ομαλά από 100px σε 0:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

Δοκιμάστε το Εκείνες τις Ημέρες

Ανίματίαση CSS

Οι αнимάσεις CSS επιτρέπουν τη λιγότερο χρονική διάρκεια, να μετατρέψουν έναν αξία CSS σε μια άλλη αξία:

παράδειγμα

όταν το στοιχείο DIV .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

Δοκιμάστε το Εκείνες τις Ημέρες