Thêm animation vào dự án Angular của bạn

Angular cung cấp cho chúng ta module BrowserAnimationsModule để chúng ta có thể tự custom những animation dùng trong dự án Angular của mình
Trong bài viết này mình không tìm hiểu chi tiết về việc custom này
Nếu các bạn muốn tìm hiểu có thể truy cập link dưới đây để thử https://angular.io/guide/animations

Trong bài viết này chúng ta sẽ tìm hiểu cách thêm 1 thư viện animation bên thứ 3 vào dự án Angular của mình. Đó chính là WOWJS.

Câu hỏi đặt ra là wow.js có gì hay để mình lựa chọn trong dự án của mình?

WOW.js là sự kết hợp giữa jQuery và thư viện animation.css để tạo ra những animation.
Điều thú vị là ở chỗ khi bạn scroll website thì jQuery sẽ bắt sự kiện scroll và active animation cho các khu vực đã được set animation qua class mà bạn scroll đến.

Cách thêm wow.js vào Angular project:

Install

   npm install wowjs

Thêm vào angular.json

"styles": [ "node_modules/wowjs/css/libs/animate.css" ],

"scripts": [ "node_modules/wowjs/dist/wow.js" ]

Tại component sử dụng animation

import { WOW } from 'wowjs';
...
ngAfterViewInit() {
    WOW.prototype.animationName = () => {
          return 'slideInLeft';
    };
    new WOW({
          live: false,
    }).init();
 }

Giá trị trong return là kiểu animation mà bạn muốn dùng trong component của mình.
{live: false} giúp WOW chỉ check các class khi mà tất cả thành phần của trang được render xong.

<section class="wow" data-wow-duration="2s">
     Trong đây là nội dung này!
</section>

Như vậy là bạn đã hoàn thành việc thêm wow.js vào project của mình.
Tuy nhiên ở cách này có 1 nhược điểm là bạn chỉ có thể thêm 1 kiểu animation cho 1 component. Mình cũng chưa rõ nguyên nhân của việc lỗi này là gì và mình sẽ cập nhật code mới khi đã tìm được solution cho vấn đề này.

Angular cung cấp cho chúng module NgwWowModule được phát triển trên wow.js Chúng ta vẫn cần cài đặt wow.js và thêm file js và css vào angular.json giống như trên.
Ngoài ra chúng ta cần

• Cài đặt

npm install --save ngx-wow

• Thêm NgwWowModule vào AppModule

import { NgwWowModule } from 'ngx-wow';
 
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgwWowModule, ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Implement code trong app component

export class AppComponent implements OnInit, OnDestroy {
  private wowSubscription: Subscription;
 
  constructor(private router: Router, private wowService: NgwWowService){
    this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
      this.wowService.init(); 
    });
  
  }
 
  ngOnInit() {
    this.wowSubscription = this.wowService.itemRevealed$.subscribe(
      (item:HTMLElement) => {
        // do whatever you want with revealed element
      });
  }
  ngOnDestroy() {
    this.wowSubscription.unsubscribe();
  }
}

Và việc bạn sử dụng nó trong template sẽ là:

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
  <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

Chúng ta có nhiều kiểu animation:
Chúng ta cũng có các option khác: data-wow-duration: Thay đổi thời gian chuyển động
data-wow-delay: Delay trước khi animation thực hiện
data-wow-offset: Khoảng cách để bắt đầu animation (nó liên quan đến chân trình duyệt của bạn)
data-wow-iteration: Thời gian để 1 animation lặp lại

Link tham khảo

https://www.npmjs.com/package/ngx-wow
https://github.com/matthieua/WOW#advanced-usage