vue中wowjs的使用

笔者亲测,在vue中使用wow.js如果不按照以下方法实施,会出现意想不到的BUG,网页刷新后图片就全部突然看不到了,被增加了一个隐藏属性,建议大家严格按照方法执行,不要随意使用

(1)通过npm安装:

npm install wowjs --save-dev

animate.css会自动安装。

(2)在main.js中引入animate.css

import 'animate.css'
在组件需要的地方引入wowjs

有两种使用方式:

1. import {WOW} from 'wowjs'    mounted() { new WOW().init() }

2.import WOW from 'wowjs'    mounted() { new WOW.WOW().init() }

下面给出在实例中的应用:

<template>
<div class="caselist">
<ul class="clearfix">
<li class="wow slideInUp" v-for="(item, index) in cases" :key="index">
</li>
</ul>
</div>
</template>

<script type="text/ecmascript-6">
import {WOW} from 'wowjs'

export default {
props: ['cases'],
watch: {
cases() {
this.$nextTick(() => { // 在dom渲染完后,再执行动画
var wow = new WOW({
live: false
})
wow.init()
})
}
}
}
</script>
 

posted @   糖~豆豆  阅读(5908)  评论(1编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决
Live2D
欢迎阅读『vue中wowjs的使用』
点击右上角即可分享
微信分享提示