vue3.0+ts+wow.js+animate.css

1.安装wow.js

npm install wow.js --save
# or
yarn add wow.js

2.安装animate.css

npm install animate.css --save
# or
yarn add animate.css

3.在 main.ts/main.js 中配置 animate.css

import 'animate.css'

import 'animate.css/animate.compat.css'

4.在app.vue中声明

<router-view/>

</template>

import WOW from "wow.js";

import { onMounted } from 'vue';

onMounted(() => {

console.log(123)

var wow = new WOW({

boxClass: "wow", // animated element css class (default is wow)

animateClass: "animated", // animation css class (default is animated)

offset: 0, // distance to the element when triggering the animation (default is 0)

mobile: true, // trigger animations on mobile devices (default is true)

live: true, // act on asynchronously loaded content (default is true)

// callback: function (box:any) {

// },

scrollContainer: null, // optional scroll container selector, otherwise use window,

resetAnimation: true, // reset animation on end (default is true)

});

wow.init();

})

</script>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

}

</style>

5.引入wow报错需要在.d.ts中声明

declare module 'wow.js'

6.在页面中使用

animate测试

123

</div>

vue3.0+ts+wow.js+animate.css相关推荐

Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
【自己的整理】页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样... 环境设置 ...
wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...
【vue】用WOW.js+animate.css实现页面滚动加载元素动画
一.场景在很多的网站中,我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的,这样看起来页面更具有活力,增加用户体验.当然这些动画我们可以通过判断滚动条的位置或者判断元素距离可视窗口的 ...
angular7 wow.js + animate.css
因为需要在原来angular 中做滚动条,元素执行动画, 所以想到wow.js wow.js 是一个轻量的小型的动画库 .废话不多说首先: npm 下载 npm install --save wow ...
如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
目录系列链接一.安装element-plus 二.按需引入 1. 为什么要按需引入? 2. 如何按需引入? 3. 验证是否引入成功三.动态换肤 1. 制作自定义主题 2. 引入自定义主题 3. ...
vue3.0+ts+element-plus多页签应用模板：项目搭建
目录系列文章一.安装vue-cli@4.5.x 二.创建项目三.项目配置四.IDE配置五.vue.config.js配置六.重置浏览器默认样式系列文章 vue3.0+ts+element ...

vue3.0+ts+wow.js+animate.css

vue3.0+ts+wow.js+animate.css相关推荐

最新文章

热门文章