【存档】在vue-cli中使用wow.js+animate.css

简介

wow.js

image.png

官网地址：https://wowjs.uk/
wow.js是一个向下滚动页面时显示CSS动画的js库。可以使用它来触发animate.css动画。

animate.css

官网地址：https://animate.style/
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

效果

先来个效果，下面内容还没写完

效果.gif

在vue-cli中使用

安装animate

npm install animate.css --save

安装wow.js

npm install wowjs

引入animate

在main.js中全局配置animate.css：

import animate from 'animate.css'
Vue.use(animate);

引入wowjs

在需要的组件引入wowjs
例如我在views/home.vue使用

//home.vue

然后直接在需要的地方添加 wow animate__animated 和需要的animate.css的动画类就行了，具体动画名看文档：https://animate.style/
可选属性：

1. data-wow-duration 代表的执行动画的时间长短
2. data-wow-delay 代表延迟多久执行该动画
3. data-wow-offset：启动动画的距离（与浏览器底部有关）
4. data-wow-iteration：动画的次数重复

注意：

添加class类的标签只能是块级标签，比如div,header,footer,p,section等，像span之类的行内标签必须增加display:inline-block，转换成块之后才能生效。

顺便给个完整home.vue的html部分代码

  

    
    
      

        
      
      

      

        
      
      

        
      
      

        
      
    
    
    
      xxx
    
  

参考

https://blog.csdn.net/Taurus_0811/article/details/100694110