Angular animations npm

Angular animations npm DEFAULT

npm

This repo is for distribution on and . The source for this module is in the main AngularJS repo. Please file issues and pull requests against that repo.

Install

You can install this package either with or with .

npm

npm install angular-animate

Then add as a dependency for your app:

angular.module('myApp',[require('angular-animate')]);

bower

bower install angular-animate

Then add a to your :

<scriptsrc="/bower_components/angular-animate/angular-animate.js"></script>

Then add as a dependency for your app:

angular.module('myApp',['ngAnimate']);

Documentation

Documentation is available on the AngularJS docs site.

License

The MIT License

Copyright (c) 2010-2015 Google, Inc. http://angularjs.org

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Sours: https://www.npmjs.com/package/angular-animate

angular-animations

npm versionMIT LicenceGitter chatCode style: prettier

Easy, Reusable Animation Utility library for Angular Apps.

Angular Animations utility library is a collection of reusable and parametrized animations build for Angular 4.4.6+ that can be used in a declarative manner. It implements all animations from animate.css (and more). Works both with AOT and JIT compilations.

Quick links

Demo | StackBlitz Demo | StackBlitz Base Template

Table of Contents

Getting Started

Prerequisites

Make sure you import in your angular app.

Import from in your root NgModule

Installation

Usage

Animations /

Animations on enter / on leave are triggered in a moment when element is added to or removed from the dom. Basic example would be with template directive.

Import animation functions that you want to use and add them to in a component decorator:

and use them in the template:

Animations with state or triggered by state changes

These animations take as an input a boolean value. Some animations, like Attention Seekers are triggered depending on the parameter; bidirectional () will be triggered by any state change, unidirectional () will be triggered only when state changes from false to true.

All and animations are triggered by changes of state from to . Animations that preserve state, like or display default state when the value is and transition to end state when the value is

Parametrized animations

All animations are open for customizations. All of them have parameters: and , and if it make sense for an animation, additional ones: , or .

Parameters can be used either in a component decorator or dynamically in a template.

In a decorator:

Animations like Attention Seekers can take a direction parameter (cannot be in template)

In a template (providing option for dynamic changes):

With parameters in a template, we can for example achieve staggering animations:

Animation Callbacks

Each animation supports and callbacks to setup hook methods that get called at the start or end of animations. We can add callbacks with the syntax or , where is the name of the animation trigger/anchor being used.

The callbacks receive an that contains the following properties: ("start" or "done"), and

You can find more information about Animation callbacks in the Angular docs

Loop animation

You can achieve looped animation by using callback. Define a variable that triggers animation and toggle it when animation done callback is called:

and in the component:

Example: simple infinite loop animation
Example: repeat animation N times after clicking the button
Example: repeat animation until certain event occurs

Chain animations

You can chain animations (e.g. wait for the first animation to finish before the second one starts) by using the callback. Example: OnEnter/OnLeave chained animations

Available Animations and Parameters

All animations have and params.

AnimationDefault AnchorOnEnter/OnLeaveAdditional Params
Attention Seekers
bounce
flash
pulse (default: 1.05)
rubberBand
shake (default: '10px')
swing
tada
wobble
jello
heartBeat (default: 1.3)
headShake
Bouncing entrances
bounceIn
bounceInDown (default: '3000px')
bounceInLeft (default: '3000px')
bounceInRight (default: '3000px')
bounceInUp (default: '3000px')
Bouncing exits
bounceOut
bounceOutDown (default: '2000px')
bounceOutLeft (default: '2000px')
bounceOutRight (default: '2000px')
bounceOutUp (default: '2000px')
Fading entrances
fadeIn
fadeInDown (default: '100%')
fadeInDownBig (default: '2000px')
fadeInLeft (default: '100%')
fadeInLeftBig (default: '2000px')
fadeInRight (default: '100%')
fadeInRightBig (default: '2000px')
fadeInUp (default: '100%')
fadeInUpBig (default: '2000px')
Fading exits
fadeOut
fadeOutDown (default: '100%')
fadeOutDownBig (default: '2000px')
fadeOutLeft (default: '100%')
fadeOutLeftBig (default: '2000px')
fadeOutRight (default: '100%')
fadeOutRightBig (default: '2000px')
fadeOutUp (default: '100%')
fadeOutUpBig (default: '2000px')
Flippers
flip
flipInX (default: 90)
flipInY (default: 90)
flipOutX (default: 90)
flipOutY (default: 90)
Light speed
lightSpeedIn (default: '100%')
lightSpeedOut (default: '100%')
Rotating entrances
rotateIn (default: -200)
rotateInDownLeft (default: -45)
rotateInDownRight (default: 45)
rotateInUpLeft (default: 45)
rotateInUpRight (default: -90)
Rotating exits
rotateOut (default: 200)
rotateOutDownLeft (default: 45)
rotateOutDownRight (default: -45)
rotateOutUpLeft (default: -45)
rotateOutUpRight (default: -90)
Sliding entrances
slideInUp (default: '100%')
slideInDown (default: '100%')
slideInLeft (default: '100%')
slideInRight (default: '100%')
Sliding exits
slideOutUp (default: '100%')
slideOutDown (default: '100%')
slideOutLeft (default: '100%')
slideOutRight (default: '100%')
Zooming entrances
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
Zooming exits
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
Specials
hinge
jackInTheBox
rollIn (default: -120), (default: '-100%')
rollOut (default: 120), (default: '100%')
Other
collapse







rotate (default: 90)
hueRotate

Running Demo App

Authors

License

This project is licensed under the MIT License - see the LICENSE file for details

Sours: /advisor/
  1. Jeep jku dimensions
  2. Ctrl home on dell laptop
  3. Ota update zip file download
  4. Benefits manager salary

npm

npm versionMIT LicenceGitter chatCode style: prettier

Easy, Reusable Animation Utility library for Angular Apps.

Angular Animations utility library is a collection of reusable and parametrized animations build for Angular 4.4.6+ that can be used in a declarative manner. It implements all animations from animate.css (and more). Works both with AOT and JIT compilations.

Quick links

Demo | StackBlitz Demo | StackBlitz Base Template

Table of Contents

Getting Started

Prerequisites

Make sure you import in your angular app.

 npm i @angular/[email protected] --save

Import from in your root NgModule

import{BrowserAnimationsModule}from'@angular/platform-browser/animations';

@NgModule({

declarations:[

...

],

imports:[

...

BrowserAnimationsModule

],

})

exportclassAppModule{}

Installation

 npm i angular-animations --save

Usage

Animations /

Animations on enter / on leave are triggered in a moment when element is added to or removed from the dom. Basic example would be with template directive.

Import animation functions that you want to use and add them to in a component decorator:

import{fadeInOnEnterAnimation,fadeOutOnLeaveAnimation}from'angular-animations';

@Component({

selector:'...',

templateUrl:'...',

styleUrls:['...'],

animations:[

fadeInOnEnterAnimation(),

fadeOutOnLeaveAnimation()

]

})

and use them in the template:

<div *ngIf="CONDITION" [@fadeInOnEnter] [@fadeOutOnLeave]></div>

Animations with state or triggered by state changes

These animations take as an input a boolean value. Some animations, like Attention Seekers are triggered depending on the parameter; bidirectional () will be triggered by any state change, unidirectional () will be triggered only when state changes from false to true.

All and animations are triggered by changes of state from to . Animations that preserve state, like or display default state when the value is and transition to end state when the value is

import{collapseAnimation,rubberBandAnimation}from'angular-animations';

@Component({

...

animations: [

rubberBandAnimation(),

collapseAnimation(),

]

})

<div [@rubberBand]="rubberState"></div>

<div [@collapse]="collapseState"></div>

Parametrized animations

All animations are open for customizations. All of them have parameters: and , and if it make sense for an animation, additional ones: , or .

Parameters can be used either in a component decorator or dynamically in a template.

In a decorator:

@Component({

...

animations: [

fadeInUpOnEnterAnimation({anchor:'enter',duration:1000,delay:100,translate:'30px'}),

bounceOutDownOnLeaveAnimation({anchor:'leave',duration:500,delay:200,translate:'40px'})

]

})

<div *ngIf="CONDITION" [@enter] [@leave]></div>

Animations like Attention Seekers can take a direction parameter (cannot be in template)

@Component({

...

animations: [

rubberBandAnimation({anchor:'rubber',direction:'=>',duration:500})

]

})

<div [@rubber]="STATE"></div>

In a template (providing option for dynamic changes):

@Component({

...

animations: [

fadeInUpOnEnterAnimation({anchor:'enter'),

  ]

})

<div *ngIf="CONDITION" [@enter]="{ value: '', params: { duration: 300, delay: 0, translate: '30px' } }" [@leave]></div>

<div *ngIf="CONDITION" [@enter]="{ value: '', params: { duration: 300, delay: 100, translate: '40px } }" [@leave]></div>

With parameters in a template, we can for example achieve staggering animations:

<div *ngFor="let i of [1,2,3]" [@enter]="{ value: '', params: { delay: i * 100 } }"></div>

Animation Callbacks

Each animation supports and callbacks to setup hook methods that get called at the start or end of animations. We can add callbacks with the syntax or , where is the name of the animation trigger/anchor being used.

<div [@fadeIn]="animationState" (@fadeIn.start)="animStart($event)" (@fadeIn.done)="animDone($event)"></div>

The callbacks receive an that contains the following properties: ("start" or "done"), and

import{AnimationEvent}from'@angular/animations';

animStart(event: AnimationEvent){

console.log('Animation Started',event);

}

animDone(event: AnimationEvent){

console.log('Animation Ended',event);

}

You can find more information about Animation callbacks in the Angular docs

Loop animation

You can achieve looped animation by using callback. Define a variable that triggers animation and toggle it when animation done callback is called:

<div [@bounce]="animState" (@bounce.done)="animDone()"></div>

and in the component:

animState=false;

animDone(){

this.animState=!this.animState

}

Example: simple infinite loop animation
Example: repeat animation N times after clicking the button
Example: repeat animation until certain event occurs

Chain animations

You can chain animations (e.g. wait for the first animation to finish before the second one starts) by using the callback. Example: OnEnter/OnLeave chained animations

Available Animations and Parameters

All animations have and params.

AnimationDefault AnchorOnEnter/OnLeaveAdditional Params
Attention Seekers
bounce
flash
pulse (default: 1.05)
rubberBand
shake (default: '10px')
swing
tada
wobble
jello
heartBeat (default: 1.3)
headShake
Bouncing entrances
bounceIn
bounceInDown (default: '3000px')
bounceInLeft (default: '3000px')
bounceInRight (default: '3000px')
bounceInUp (default: '3000px')
Bouncing exits
bounceOut
bounceOutDown (default: '2000px')
bounceOutLeft (default: '2000px')
bounceOutRight (default: '2000px')
bounceOutUp (default: '2000px')
Fading entrances
fadeIn
fadeInDown (default: '100%')
fadeInDownBig (default: '2000px')
fadeInLeft (default: '100%')
fadeInLeftBig (default: '2000px')
fadeInRight (default: '100%')
fadeInRightBig (default: '2000px')
fadeInUp (default: '100%')
fadeInUpBig (default: '2000px')
Fading exits
fadeOut
fadeOutDown (default: '100%')
fadeOutDownBig (default: '2000px')
fadeOutLeft (default: '100%')
fadeOutLeftBig (default: '2000px')
fadeOutRight (default: '100%')
fadeOutRightBig (default: '2000px')
fadeOutUp (default: '100%')
fadeOutUpBig (default: '2000px')
Flippers
flip
flipInX (default: 90)
flipInY (default: 90)
flipOutX (default: 90)
flipOutY (default: 90)
Light speed
lightSpeedIn (default: '100%')
lightSpeedOut (default: '100%')
Rotating entrances
rotateIn (default: -200)
rotateInDownLeft (default: -45)
rotateInDownRight (default: 45)
rotateInUpLeft (default: 45)
rotateInUpRight (default: -90)
Rotating exits
rotateOut (default: 200)
rotateOutDownLeft (default: 45)
rotateOutDownRight (default: -45)
rotateOutUpLeft (default: -45)
rotateOutUpRight (default: -90)
Sliding entrances
slideInUp (default: '100%')
slideInDown (default: '100%')
slideInLeft (default: '100%')
slideInRight (default: '100%')
Sliding exits
slideOutUp (default: '100%')
slideOutDown (default: '100%')
slideOutLeft (default: '100%')
slideOutRight (default: '100%')
Zooming entrances
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
Zooming exits
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
Specials
hinge
jackInTheBox
rollIn (default: -120), (default: '-100%')
rollOut (default: 120), (default: '100%')
Other
collapse







rotate (default: 90)
hueRotate

Running Demo App

Authors

License

This project is licensed under the MIT License - see the LICENSE file for details

Sours: https://www.npmjs.com/package/angular-animations
Beautiful Router Animations with Angular

npm

Codacy BadgeBuild StatuscodecovKnown VulnerabilitiesLicense MIT

This is an adaptation of the Animate.css animations using the @angular/animations library.

  • You can find a demo here.
  • Angular 11.x use ngx-animations 5.x
  • Angular 9.x use ngx-animations 4.x
  • Angular 8.x use ngx-animations 3.x
  • Angular 7.x use ngx-animations 2.x

Installing and importing NgxAnimations

1 Install :

npm install ngx-animations

Or

2 Import the and in your module :

import{BrowserAnimationsModule}from'@angular/platform-browser/animations';import{NgxAnimationsModule}from'ngx-animations'; ... @NgModule({imports: [BrowserAnimationsModule,NgxAnimationsModule], ... })

Using the to create animations on events with a minimum of code

<div(click)="myDiv.animate()"><div#myDiv="animated" [animAted]="{time: 800, animation: 'flip'}"></div></div>

Running example on stackblitz using InViewportDirective

Using the to animate an element on init and before destroy

Use the directive to set the start and end animation :

<div*animIf="show; info: { startAnim: 'bounceIn', endAnim: 'bounceOut', time: 1000 }" ></div>

Add custom animations to the existing animations

Create an instance for every animation you want to add :

constanimationDefinition=newAnimationDefinition({},[{background: 'blue',width: '25%',offset: 0.25},{background: 'green',width: '100%',offset: 0.5},{background: 'yellow',width: '50%',offset: 0.75},{background: 'black',width: '200px',offset: 1}]);

Inject the in your and use the method to add your array of s:

constructor(privateanimationsService: AnimationsService){this._animationsService.addAnimations([{name: 'aCustomAnimation',animation: animationDefinition}]);}

That's it, you are now ready to use your custom animation like other native animations.

You can find a running example for custom animations on stackblitz

Use the AnimationsService to create and use animations (you can use instead)

Then in your component :

Import the desired animation and the AnimationsService :

import{fadeIn,AnimationsService}from'ngx-animations';

Get your element using the annotation :

@ViewChild('element') element: ElementRef;

Inject the :

constructor(privateanimationsService: AnimationsService){}

After that you can create the player :

constplayer=this.animationsService.create(fadeIn(300),this.element.nativeElement);

And play the animation :

Add routing transition animations

stackblitz example

First add to routing :

{path: "animals",component: AnimalsComponent,data: {animation: "AnimalsPage"}},{path: "fruits",component: FruitsComponent,data: {animation: "FruitsPage"}}

Then you can either use a generic value for all the transitions :

@Component({selector: "my-app",templateUrl: "./app.component.html",styleUrls: ["./app.component.css"],animations: [trigger("routeAnimation",[buildRouteTransition({stateChangeExpr: "* => *",enter: animations.fadeIn(1000),leave: animations.fadeOut(1000)})])]})exportclassAppComponent{}

Or add a specific animation for each transition :

@Component({selector: "my-app",templateUrl: "./app.component.html",styleUrls: ["./app.component.css"],animations: [trigger("routeAnimation",[buildRouteTransition({stateChangeExpr: "AnimalsPage => FruitsPage",enter: animations.zoomInRight(500),leave: animations.zoomOutLeft(200)}),buildRouteTransition({stateChangeExpr: "FruitsPage => AnimalsPage",enter: animations.zoomInLeft(500),leave: animations.zoomOutRight(200)})])]})exportclassAppComponent{}

Finally link the animation definition to the template :

List of animations

bounce flash pulse rubberBand shake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flip flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight slideInUp slideInDown slideInLeft slideInRight slideOutUp slideOutDown slideOutLeft slideOutRight zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp hinge jackInTheBox rollIn rollOut backInDown backInLeft backInRight backInUp backOutDown backOutLeft backOutRight backOutUp

Sours: https://www.npmjs.com/package/ngx-animations

Npm angular animations

.

Angular Animations Tutorial - Mosh

.

Similar news:

.



1153 1154 1155 1156 1157