Share
När det används ordentligt kan animationer göra en webbapplikation rolig att använda. Moderna webbläsare kan animera olika element på en webbsida med bara CSS. Om du använder AngularJS i ett av dina projekt kan du också använda ngAnimate-modulen för att lägga till animering på den i Angular-vägen.
Med ngAnimate-modulen kan du lägga till CSS samt JavaScript-baserade animeringar till dina projekt. De CSS-baserade animationerna innehåller nyckelbilder och övergångar. De JavaScript-baserade animationerna måste registreras med module.animation (). I den här handledningen lär du dig att lägga till CSS-animeringar till inbyggda animationsbevisade AngularJS-direktiv för att göra dina appar mer tilltalande.
Det första du behöver göra för att lägga till animeringar är att inkludera vinkel animate.js i ditt projekt. När du är klar kan du inkludera ngAnimate-modulen som ett beroende i din app för att börja animera olika element.
Accentsconagua
angular.module ('app', ['ngAnimate']);Här är en lista över olika animationsmedvetna direktiv och animationshändelser som du kan använda för att animera dem:
ng-repeat kan upptäcka stiga på, lämna och flytta evenemang.ng-view, ng-inkluderar, ng-omkopplare och ng-om kan upptäcka stiga på och lämna evenemang.ng-show, ng-hide och ng-klass kan upptäcka Lägg till och ta bort evenemang.ng-meddelande kan också upptäcka stiga på och lämna evenemang.Du bör komma ihåg att dessa animationshakar inte är aktiverade som standard; De blir bara aktiva när du lägger till ngAnimate-modulen i din app.
Ng-if-direktivet i AngularJS används för att lägga till eller ta bort element från DOM baserat på värdet av ett givet uttryck. När uttrycket utvärderas till falsk, Elementet tas bort från DOM. När uttrycket utvärderas till Sann, en klon av elementet återinsätts i DOM. Denna tillsats och borttagning av element är omedelbar. Du kan dock animera de element som tas bort eller återskapas med hjälp av ngAnimate-modulen.
Om elementen läggs till i DOM kan du använda ng-ange och ng-enter-aktiv klasser för att animera dem. Övergångskoden och startanimeringstillståndet läggs till i ng-ange klass. Det slutliga animationstillståndet läggs till i ng-enter-aktiv klass. Här är koden för att visa några röda staplar genom att animera sin höjd.
.red-bar.ng-enter övergång: allt lätthet 0.25s; höjd: 0px; .red-bar.ng-enter.ng-enter-aktiv höjd: 30px;
På samma sätt kan du också använda en animering för att dölja staplarna med hjälp av ng-permission och den ng-leave-aktiv klasser. Jag har släppt bort animeringen för att ta bort de röda staplarna så att du tydligt kan se skillnaden mellan animerade och icke-animerade stater.
Direktivet ng-view i AngularJS används som en behållare för att ladda om en del av sidan när användaren växlar mellan olika visningar.
Precis som tillägg och borttagning av element med ng-om, denna process sker också mycket snabbt. Om du vill animera inmatningen och lämningen av olika element i vyn, kan du använda samma gamla ng-ange, ng-enter-aktiv, ng-permission, och ng-leave-aktiv klasser.
Förutom dessa fyra klasser finns det också en ng-animera klass. Under animeringens gång läggs denna klass också till alla element som behöver animeras. Du kan använda den för att tillhandahålla alla CSS-regler som måste vara tillämpliga under animeringens gång. Här är ett exempel:
.planet-view.ng-animera transition: all ease 0.4s; position: absolut; .planet-view.ng-enter top: 200px; opacitet: 0; .planet-view.ng-leave, .planet-view.ng-enter.ng-enter-aktiv top: 0; opacitet: 1; .planet-view.ng-leave.ng-leave-active top: -200px; opacitet: 0;
Som du kan se i ovanstående kod har en övergångstid på 0,4 sekunder applicerats på alla egenskaper. När informationen för en specifik planet går in i vyn börjar den med en opacitet av noll och topp position inställd till 200px. Samtidigt har elementen som håller på att lämna vyn en opacitet av 1.
Vid övergångens slut når de inmatade elementen toppens uppfattning och blir helt ogenomskinliga. På samma sätt ansluter de lämnande elementen till en position 200px ovanför vyn och bleknar bort. Detta ger oss en fin effekt där informationen verkar blekna in från botten av sidan och blekna ut överst på sidan.
I följande ng-view demo, försök att klicka på namnet på olika planeter för att se stiga på och lämna animationer i aktion.
Informationen om den jordbundna planets atmosfäriska sammansättning har tagits från denna sida.
Ng-repeat-direktivet i AngularJS används för att skapa en mall en gång per objekt i en given samling. Detta direktiv används när du försöker sortera, filtrera, lägga till eller ta bort objekt från en samling. Det finns tre animationshändelser som kan utlösas med ng-repeat.
I de två sista sektionerna har du använt CSS-övergångar för att animera olika element. I det här avsnittet lär du dig att animera olika element med hjälp av keyframe-animering. Jag kommer att ge koden för både övergången och keyframe-animationen så att du kan se skillnaden mellan de två.
Här är övergångskoden för att animera objekten:
.task-item.ng-enter, .task-item.ng-leave övergång: alla linjära 0,25s; .task-item.ng-leave top: 0; opacitet: 1; .task-item.ng-leave.ng-leave-active top: 200px; opacitet: 0; .task-item.ng-enter opacitet: 0; topp: -500px; .task-item.ng-enter.ng-enter-active opacitet: 1; topp: 0px;
Som du kan se är den här koden mycket lik den övergångskod som vi har använt fram till den här tiden. Starttillstånden definieras i ng-ange och ng-permission. Slutändningarna definieras i ng-enter-aktiv och ng-leave-aktiv.
Följande kod återskapar samma effekt med hjälp av keyframe-animeringar.
@keyframes tillagt från opacitet: 0; topp: -500px; till opacitet: 1; topp: 0px; @keyframes raderade från top: 0; opacitet: 1; till topp: 200px; opacitet: 0; .task-item.ng-enter animering: 0.25s tillagt; .task-item.ng-leave animation: 0.25s deleted;
Den här gången använder vi CSS animering egenskap för att lägga till animeringen. Den faktiska animationen definieras med @keyframes. Det ursprungliga och slutliga tillståndet för olika objekt har definierats inom nyckelramarna själva. Observera att vi inte behöver använda ng-enter-aktiv och ng-leave-aktiv klasser längre. En fördel med att använda keyframes är att animationen nu kan bli mycket mer komplicerad än en enkel övergång.
Försök lägga till och ta bort några uppgifter i följande demo för att se animationen i åtgärd.
Envato Tuts + har också publicerat en handledning om att validera dina formulär med hjälp av ngMessages. I den sista delen av den här handledningen lärde du dig att visa felmeddelanden först efter att en användare faktiskt har berört ett inmatningsfält. Alla felmeddelanden i den handledningen visas och försvinna direkt.
Om du vill lägga till en subtil animering för att visa eller dölja felmeddelandena kan du göra det enkelt med hjälp av ngAnimate-modulen. Som nämnts i början av denna handledning, ng-meddelande kan upptäcka stiga på och lämna evenemang. Det betyder att du kan använda ng-ange och ng-enter-aktiv klasser för att ange initialt och slutligt tillstånd för felmeddelanden som för närvarande visas för användarna. På samma sätt kan du använda ng-permission och ng-leave-aktiv klasser för att ange initialt och slutligt tillstånd för felmeddelanden som är i färd med att döljas från användarna.
Här är ett exempel på att ändra egenskapen för opacitet för felmeddelanden.
.error-msg.ng-enter övergång: 0,5s linjär alla; opacitet: 0; .error-msg.ng-enter.ng-enter-aktiv opacitet: 1;
Jag har lagt till en error-msg klass till alla felmeddelanden, och du kan lägga till egna klasser och uppdatera koden i enlighet med detta. I det här fallet har jag inte tillämpat någon animering av felmeddelanden som har blivit ogiltiga och borde inte längre visas för användare. Det betyder att de kommer att försvinna direkt. Här är den demo som visar hur man använder ngMessages och ngAnimate tillsammans.
Denna handledning lärde dig hur man lägger till animering i dina AngularJS-webprogram med hjälp av ngAnimate-modulen. Du lärde dig också att tillämpa olika animeringar på ett element baserat på utlösande händelse. Det sista avsnittet täckte hur man använder ngAnimate-modulen med andra moduler som ngMessages för att lägga till fina animeringar till felmeddelanden.
En sak som du måste komma ihåg när du använder animeringar är att du inte får använda dem för mycket. För många animeringar kan distrahera användarna från appens huvudfunktion. Använd bara animeringar när du tror att de faktiskt kan förbättra användarupplevelsen.
Jag hoppas att du haft denna handledning. Om du har några tips, förslag eller frågor relaterade till ngAnimate-modulen, vänligen kommentera.
