# @ambroisebazie/ngx-animations

> Some angular animations to save your development time

Latest version **1.0.5** (published 2022-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ambroisebazie/ngx-animations
pnpm add @ambroisebazie/ngx-animations
yarn add @ambroisebazie/ngx-animations
bun add @ambroisebazie/ngx-animations
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-05-02 |
| First published | 2022-04-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 172 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ambroisebazie |

## Links

- npm: https://www.npmjs.com/package/@ambroisebazie/ngx-animations
- npm.io page: https://npm.io/package/@ambroisebazie/ngx-animations

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 1.0.5 (latest) — 2022-05-02
- 1.0.4 — 2022-04-27
- 1.0.3 — 2022-04-27
- 1.0.2 — 2022-04-27
- 1.0.1 — 2022-04-24
- 1.0.0 — 2022-04-24

## README

# Ngx Animations

Some angular animations to save your development time

- Expand-collapse
- fade
- shake
- slide
- zoom

## Demo
![](https://github.com/ognanshissi/images/blob/master/ngx-ag.gif)

## Installation

Use your favorite node package management

````bash
npm i --save @ambroisebazie/ngx-animations 

OR

yarn add @ambroisebazie/ngx-animations

````

## List of animations triggers defined

> Expand Collapse triggers

- `expandCollapse`

> Fade animation triggers
- `fadeIn`
- `fadeInTop`
- `fadeInBottom`
- `fadeInLeft`
- `fadeInRight`
- `fadeOut`
- `fadeOutTop`
- `fadeOutBottom`
- `fadeOutLeft`
- `fadeOutRight`

> Shake
- `shake`

> Slide
- `slideInTop`
- `slideInBottom`
- `slideInLeft`
- `slideInRight`
- `slideOutTop`
- `slideOutBottom`
- `slideOutLeft`
- `slideOutRight`

> Zoom
- `zoomIn`
- `zoomOut`

## Usage

Inside `app.component.ts`
````typescript
import {NgxAnimations} from '@ambroisebazie/ngx-animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [NgxAnimations]
})
export class AppComponent implements OnInit {

  showText = false;

  constructor () {}


  ngOnInit () {
    // Example how to trigger animations
    setTimeout(() => this.showText = true, 2000)
  }

}

````

Inside your html file `app.component.html`
````html
<div *ngIf="showText" [@fadeIn]="showText">
  Hello world
</div>
````

## Thank You !

---
_Source: https://npm.io/package/@ambroisebazie/ngx-animations · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._