在VUE中使用wow.js

最新推荐文章于 2025-03-14 18:17:07 发布

小仓桑

最新推荐文章于 2025-03-14 18:17:07 发布

阅读量1.5k

点赞数 1

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/qq_43462019/article/details/128378102

版权

vue.js

VUE 专栏收录该内容

16 篇文章

订阅专栏

该篇博客介绍了如何在Vue项目中安装和使用Animate.css库，通过引入main.js文件并使用Vue.use()方法挂载。在组件中，可以通过两种方式配置和初始化WOW.js，实现元素的动画效果，为网页增添动态视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：安装插件

npm install wowjs --save-dev

第二步：引入的main.js中

import animated from 'animate.css'
import 'wowjs/css/libs/animate.css'
Vue.use(animated)

第三步：组件中使用

// 逐一配置
import { WOW } from 'wowjs'
 mounted() {
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 40,
      mobile: true,
      live: true,
    })
    wow.init()
  },

// 直接初始化
mounted() {
   new WOW().init()
}