1.0.5 • Published 2 years ago
@ambroisebazie/ngx-animations v1.0.5
Ngx Animations
Some angular animations to save your development time
- Expand-collapse
- fade
- shake
- slide
- zoom
Demo
Installation
Use your favorite node package management
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
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
<div *ngIf="showText" [@fadeIn]="showText">
Hello world
</div>