angular7中wow.js的使用

墨蓝 2021-10-19 07:18 353阅读 0赞

#### ngx-wow地址 ####

*  https://tinesoft.github.io/ngx-wow/doc/index.html
 *  https://www.npmjs.com/package/ngx-wow

#### 首先安装依赖项， wow.js ####

npm install --save wowjs

#### 在angular.json中引入animate.css和wow.js ####

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

#### 安装ngx-wow ####

npm install --save ngx-wow

#### 在需要的模块中导入NgwWowModule 模块 ####

// company-profile.module.ts
    import { NgwWowModule } from 'ngx-wow';
     imports: [
            CommonModule,
            CompanyProfileRoutingModule,
            SharedModule,
            NgwWowModule
        ]

#### 依赖注入并初始化 ####

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

import { NgwWowService } from 'ngx-wow';
    ngOnInit() {
        this.wow.init();
    }

#### 初始化和引入模块，可以直接在app模块中进行导入和初始化 ####

发表评论取消回复

表情：

评论列表（有 0 条评论，353人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目配合wowjs使用时常见的问题总结

写在前面 > wowjs[地址][Link 1]这里先简单的说一下，这个js是用来做动画的，最常用的场景是公司的官网，可以做的相对比较炫酷，他其实就是封装了animate

心已赠人/ 2022年11月02日 11:43/ 0 赞/ 488 阅读

相关 vue使用wowjs

1）通过npm安装： npm install wowjs --save-dev animate.css会自动安装。

╰半夏微凉°/ 2022年03月26日 11:50/ 0 赞/ 304 阅读

相关 angular7中常见细节使用

Angular中修改第三方组件的样式 ::ng-deep img width 100% height 100% b

ゝ一世哀愁。/ 2022年02月27日 10:12/ 0 赞/ 288 阅读

相关 angular7中的加密、安全操作

angular中md5的使用 1. 安装依赖 npm install ts-md5 --save 2. 导入 import

川长思鸟来/ 2022年02月19日 08:21/ 0 赞/ 168 阅读

相关 angular7中ngx-quill富文本编辑器的使用

在angular中使用ngx-quill 在angular中使用ngx-quill富文本编辑器的入坑指南。 1. 如果在ng2<=>ng5版本中，根据网上的教程是没有

朴灿烈づ我的快乐病毒、/ 2022年01月30日 02:51/ 0 赞/ 429 阅读

相关 angular7中wow.js的使用

ngx-wow地址 https://tinesoft.github.io/ngx-wow/doc/index.html https://www.npmjs.c

墨蓝/ 2021年10月19日 07:18/ 0 赞/ 354 阅读

相关 angular7中使用echarts

安装依赖建议使用cnpm 安装，直接使用npm可能会报错 cnpm install echarts --save cnpm install ngx-e

心已赠人/ 2021年10月18日 15:28/ 0 赞/ 523 阅读

相关 angular7项目中使用Iconfont字体图标库

iconfont官网 [https://www.iconfont.cn][https_www.iconfont.cn] 选择字体图标 1. 首先进入iconfo

约定不等于承诺〃/ 2021年10月18日 13:26/ 0 赞/ 398 阅读

相关 angular7中按需使用ng-zorro

在开发项目的时候，我们有时候不需要整个框架里面的模块，所以我们需要按需引入安装ng-zorro npm install ng-zorro-antd@7.3.3

喜欢ヅ旅行/ 2021年10月18日 05:50/ 0 赞/ 365 阅读

相关 angular7项目中使用页面锚点

在angular项目中使用页面锚点，原生的html锚点的时候会页面跳转或者找不到路由。可以使用以下方式解决： html <div class="circle_l

缺乏、安全感/ 2021年10月18日 05:43/ 0 赞/ 518 阅读