NgxAnimateCssGrid

Angular wrapper for animate-css-grid

Installing and usage

``
npm install --save animate-css-grid
npm install --save ngx-animate-css-grid
`

Usage

Load the module for your app
`javascript
import { NgxAnimateCssGridModule } from 'ngx-animate-css-grid';

@NgModule({
...
imports: [
...
NgxAnimateCssGridModule
]
})
`

Use directive in you component template

`html



• 
  
  
  
  

  Item title

  
  

  Item body

  
  
  
  



`
You can provide optional config and listen to events:

`html





• 
  
  
  
  

  Item title

  
  

  Item body

  
  
  
  



`

Available configuration options:

`
{
// int: default is 0 ms
stagger: 100,
// int: default is 250 ms
duration: 500
// string: default is 'easeInOut'
easing: 'backInOut',
}
`

Events

`javascript
(onStart) // called with list of HTMLElements about to animate
(onEnd) // called with list of HTMLElements that just finished animating
`

Helper functions available through the directive reference
`javascript
forceGridAnimation() // use it to force update after inline style changes
unwrapGrid() // remove animations but not the grid itself
``

For more detailed documentation with all the supported options see: animate-css-grid