ackerapple
Description
Angular animations made easy. Example Page
Angular 5.2.0+ required
Install
Requirements
Since you're using Angular, the following are expected to already be installed:
- reflect-metadata
- @angular/core
- @angular/animations
install command:
npm install ack-angular-fx --save-devInclude
Animations must be injected into your components and this is how to do that
import { animations } from "ack-angular-fx";
import { Component } from "@angular/core"
@Component({
animations:animations,
template:`
<div *ngIf="boolean" [@fadeInOutUp]="boolean">
...
</div>
<button (click)="boolean=!boolean">
hide or show
</button>
`
}) export class AppComponentBrowser Compatibility
All good!
Angular animations have come a long way. In the past, they didn't work in Safari without including additional libraries. Now, all animations appear to be working anywhere that Angular could be run.
Examples
View interactive example page here.
Robust Example
This example has pretty much everything needed to boot
NOTE: AckFxModule, in code below, is only needed IF directive fx-tracker being used for back-n-forth swap animation tracking
import "zone.js"
import "reflect-metadata"
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
import { NgModule, Component } from "@angular/core"
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
import { animations } from "ack-angular-fx";
//NOTE: This line only needed IF directive fx-tracker used (back-n-forth swap animations)
import { AckFxModule } from "ack-angular-fx";
import { supportDocument } from "ack-angular-fx/web-animations.min"
supportDocument( document )//cross browser fx support
@Component({
animations:animations,
template:`
<div *ngIf="boolean" [@rotateInOut]="boolean">
...
</div>
<button (click)="boolean=!boolean">
hide or show
</button>
`
}) export class AppComponent
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AckFxModule//NOTE: This line only needed IF directive fx-tracker used (back-n-forth swap animations)
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
}) export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule)Params Example
The configuration options available to define for animations
<div [@zoomInOut]="{value:boolean, params:{time:'2000ms 0 linear'}}">
...
</div>Learn more about Angular animation timing here
Stagger
Offset multiple animations using Angular 4.2.4 or greater
Currently, staggering animations using ack-angular-fx, is controlled by a parent stagger definition and child animations subscribing to that via the css class "childFx"
Stagger Items Example
A parent container staggering child animations whenever the array adds or removes elements
<div [@childStag]="array.length">
<div
*ngFor = "let x of array"
[@rotateInOut] = "1"
>
<div>
ngFor loop with animations for each
</div>
</div>
</div>Stagger Table Rows Example
A table element staggering row animations whenever "rowStaggers" variable changes value
<table style="width:100%" [@childStag]="array.length">
<ng-container *ngFor="let x of array">
<tr [@bounceInOut]="array.length" style="background-color:#CCC">
<td>{{ x }}</td>
<td>Item Row {{ x }}</td>
</tr>
</ng-container>
</table>Supported Animations
- fadeIn
- fadeInDown, fadeInLeft, fadeInRight, fadeInUp
- fadeOut
- fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp
- fadeInOut
- fadeInOutDown, fadeInOutLeft, fadeInOutRight, fadeInOutUp
- bounceIn
- bounceInDown, bounceInLeft, bounceInRight, bounceInUp
- bounceOut
- bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp
- bounceIn
- bounceInOutDown, bounceInOutLeft, bounceInOutRight, bounceInOutUp
- rotateIn
- rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
- rotateOut
- rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight
- rotateInOut
- rotateInOutDownLeft, rotateInOutDownRight, rotateInOutUpLeft, rotateInOutUpRight
- zoomIn
- zoomInDown, zoomInLeft, zoomInRight, zoomInUp
- zoomOut
- zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp
- zoomInOut
- zoomInOutDown, zoomInOutLeft, zoomInOutRight, zoomInOutUp
- slideInDown, slideInLeft, slideInRight, slideInUp
- slideOutDown, slideOutLeft, slideOutRight, slideOutUp
- slideInOutDown, slideInOutLeft, slideInOutRight, slideInOutUp
see online demo https://ackerapple.github.io/ack-angular-fx
Prebuild Fxs to Single File
Known as the prefx process, ack-angular-fx has cli commands to bundle animations to file
This often helps with bundling issues and Angular AOT compilation
Example Compile All Animations to One File
Step 1 : Add the following to your package.json scripts
"scripts":{
"build:prefx": "ack-angular-fx --out ./src/prefx.ts"
}Step 2 : Now, run the following in a command prompt terminal
npm run build:prefxAfter the above command you should now see a prefx.ts file in your src folder
Step 3 : Import your compiled .ts file and apply to component(s)
import { animations } from "./prefx"
import { Component } from "@angular/core"
@Component({
selector: 'app',
template: '<div *ngIf="a==1" [@fadeInUp]="true">hello world</div>',
animations: animations
})Work on This Project
Everything in this topic is run in an command prompt terminal
Clone this project
git clone https://github.com/AckerApple/ack-angular-fxDev Fast Project Watching
npm run watchBuild before commit
npm run buildCredits
A special thank you goes out to yuyang041060120 for creating ng2-animate and for taking too long to respond to my pull request, which has led to the birth of ack-angular-fx.
Resources
- Inspired by Animate.css
- tester @ matthewlein.com
- maps @ easings.net