Angular12中使用wow.js页面滚动动画效果

参考文档：

• https://wowjs.uk/
• https://wowjs.uk/docs.html
• https://animate.style/
• https://tinesoft.github.io/ngx-wow/doc/index.html
• https://www.npmjs.com/package/ngx-wow

wow.js 安装

npm install --save wowjs

安装后在angular中引入wow.js的js和css文件

"styles": [
    "src/styles.scss",
    "node_modules/wowjs/css/libs/animate.css"
],
"scripts": [
    "node_modules/wowjs/dist/wow.min.js"
]

ngx-wow 安装

npm install --save ngx-wow

• 安装后，一般我们会在根组件中导入和初始化，这样其它组件中只需要在html中设置对应的class即可，当然也可只在某个组件中导入和使用。

import { NgwWowModule } from 'ngx-wow';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        NgwWowModule, // <--import
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

• 导入模块后，您可以使用NgwWowService组件中的（即AppComponent）通过调用触发显示动画，init()或者在显示元素时通过WOW通知。

import { NgwWowService } from 'ngx-wow';

constructor(
    private wowService:NgwWowService,
){}

ngOnInit(): void {
    this.wowService.init();

}

• 接下来就是在元素上加class了: wow fadeInUp, 这只是其中一个动画效果，可参考本站的效果。

<div class="wow fadeInUp">
...
...
</div>

全部动画class

这里全部的动画class，有时间的同学可自己测试！效果演示参考链接：https://animate.style/

* Attention seekers
    bounce
    flash
    pulse
    rubberBand
    shakeX
    shakeY
    headShake
    swing
    tada
    wobble
    jello
    heartBeat

* Back entrances
    backInDown
    backInLeft
    backInRight
    backInUp

* Back exits
    backOutDown
    backOutLeft
    backOutRight
    backOutUp

* Bouncing entrances
    bounceIn
    bounceInDown
    bounceInLeft
    bounceInRight
    bounceInUp

* Bouncing exits
    bounceOut
    bounceOutDown
    bounceOutLeft
    bounceOutRight
    bounceOutUp

* Fading entrances
    fadeIn
    fadeInDown
    fadeInDownBig
    fadeInLeft
    fadeInLeftBig
    fadeInRight
    fadeInRightBig
    fadeInUp
    fadeInUpBig
    fadeInTopLeft
    fadeInTopRight
    fadeInBottomLeft
    fadeInBottomRight

* Fading exits
    fadeOut
    fadeOutDown
    fadeOutDownBig
    fadeOutLeft
    fadeOutLeftBig
    fadeOutRight
    fadeOutRightBig
    fadeOutUp
    fadeOutUpBig
    fadeOutTopLeft
    fadeOutTopRight
    fadeOutBottomRight
    fadeOutBottomLeft

* Flippers
    flip
    flipInX
    flipInY
    flipOutX
    flipOutY

* Lightspeed
    lightSpeedInRight
    lightSpeedInLeft
    lightSpeedOutRight
    lightSpeedOutLeft

* Rotating entrances
    rotateIn
    rotateInDownLeft
    rotateInDownRight
    rotateInUpLeft
    rotateInUpRight

* Rotating exits
    rotateOut
    rotateOutDownLeft
    rotateOutDownRight
    rotateOutUpLeft
    rotateOutUpRight

* Specials
    hinge
    jackInTheBox
    rollIn
    rollOut

* Zooming entrances
    zoomIn
    zoomInDown
    zoomInLeft
    zoomInRight
    zoomInUp

* Zooming exits
    zoomOut
    zoomOutDown
    zoomOutLeft
    zoomOutRight
    zoomOutUp

* Sliding entrances
    slideInDown
    slideInLeft
    slideInRight
    slideInUp

* Sliding exits
    slideOutDown
    slideOutLeft
    slideOutRight
    slideOutUp