vue项目引入animate.css和wowjs，以及注意的小坑

背景介绍

还是同一个项目，要嵌入别人的项目的项目。领导说首页界面太死板了，于是我就想加个animate.css和wowjs。但是没想到的是这个竟然也有一些小坑。之前没第一时间加这个是因为之前遇到有个老板不喜欢animate.css的动画，所以一般老板不要求，我也不会主动加。

实际操作

其实在网上也可以找到很多，我之前按照教程弄的，可惜不动，也没报错啥的，就是没出效果，这东西也不要jq，为啥出不来呢？哈哈，原来是有小坑。

1. 首先引入wowjs，打开当前目录下的小黑框

npm i wowjs -s -d

2. 在mian.js中引入wowjs自带的animate.css

import 'wowjs/css/libs/animate.css'

3. 在需要的组件中引入

import { WOW } from 'wowjs'

// 在mounted中引入
mounted(){
  new WOW().init()
}

貌似已经引入完成了，可以试一下了。。。

<div class="box wow fadeInLeft" style="width:120px;height:120px;background:#000;">测试</div>

完整代码：（其实就我是初始化一个空白的项目来测试的）

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>

    <div class="box wow fadeInLeft" style="width:120px;height:120px;background:#000;">测试</div>
    
  </div>
</template>

<script>
import { WOW } from 'wowjs'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    new WOW().init()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

ok,我这边测试没问题。现在的问题是我再加一个效果zoomIn的效果

<div class="box wow zoomIn" style="width:120px;height:120px;background:#ff0000;">测试</div>

然而效果并没有出现，我查看了下，wowjs里面自带的animate.css效果很少，不满足需求，于是要再加效果。

4. 引入animate.css

npm i animate.css -s

同样到main.js中引入

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

ok，貌似又可以了，刷新页面，然并暖，还是不行。。。

查看animate.css源码发现类名变了，其实这里我们引入的是node_modules下面的animate.css，而上面的 import 'wowjs/css/libs/animate.css’是wowjs自带的。zoomIn在整整可用的其实是下面的写法：

<div class="box wow animate__zoomIn" style="width:120px;height:120px;background:#ff0000;">测试</div>

就是类名变了，从zoomIn改成了animate__zoomIn，就是这个小坑。其他的效果其实都一样，只不过要加前缀animate__

main.js完整代码（初始化的空项目）：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

HelloWorld.vue完整代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>

    <div class="box wow fadeInLeft" style="width:120px;height:120px;background:#000;">测试</div>
    <div class="box wow animate__zoomIn" style="width:120px;height:120px;background:#ff0000;">测试</div>
  </div>
</template>

<script>
import { WOW } from 'wowjs'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    new WOW().init()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

现在想加什么效果就可以随意加了，注意类名，不确定的话可以到源文件下看看类名是什么