vue动画效果

1、通过npm安装wowjs和animate.css

 
npm install wowjs --save -dev
npm install animate.css --save
 
这里有个坑 直接这样安装 animate版本太高 没有效果,安装这个版本没问题"animate.css": "^3.7.2"
 

2、在main.js中引入animate.css

import 'animate.css'
也可以直接下载animate.min.css文件放到项目静态资源目录,然后在main.js里面引用:import '@/styles/animate.min.css'

3、在需要使用的文件中局部引入wowjs,并在mounted实例化wow这个对象

<script>
import { WOW } from 'wowjs'
 
export default {
  name: 'Home',
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      // 在dom渲染完后,再执行动画
      const wow = new WOW({
        live: false
      })
      wow.init()
    })
  }
}
</script>

4、在需要使用动画效果的标签中添加wow样式

<div class="m_con wow  fadeInLeft"></div>
类名前面的wow是每一个带动画的元素都要加的,slideInLeft就是说明动画样式。后面的data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可选可不选。
 
<div class="wow bounce " data-wow-delay="1.5s" data-wow-iteration:"1"></div>

5、wow.js效果实例显示 点击查看

 

文字工具

转换工具

便民查询

开发工具

其它工具

随机推荐