animate动画库

动画库animate.css

• ps: 这里的用法是vue2的哦

安装：

npm install animate.css --save-dev

animate引入

// 在main.js中引入动画库
import Vue from 'vue';
//...其它代码...
import animate from 'animate.css';
Vue.use(animate);
//...其它代码...

animate使用示例

<template>
    <div>
        <h1 class="animate__animated animate__fadeInDownBig">知识改变命运</h1>
        <h3 class="animate__animated animate__fadeInRightBig">Lorem ipsum, dolor sit amet consectetur adipisicing
              elit. Alias fuga iste culpa animi dolores,
              reiciendis atque amet molestias necessitatibus officiis labore harum, facere, dolor est maiores ipsam
              distinctio iure quo?</h3>
    </div>
</template>
...其它代码...

辅助动画库

WOWJS根据滑动到位置，加载该位置动画

• WOWJS安装：

npm install wowjs --save-dev

• WOWJS配置项与使用

1. boxClass: 用户滚动时显示隐藏框的类名。
2. animateClass: 触发CSS动画的类名（animate.css库默认为'animated'）
3. offset: 定义浏览器视口底部与隐藏框顶部之间的距离。当用户滚动并到达该距离时，隐藏的框被显示出来。
4. mobile: 在移动设备上打开/关闭WOW.js。
5. live: 在页面上不断检查新的WOW元素。

<script>
import { WOW } from 'wowjs';
export default {
  mounted() {
    new WOW({
        boxClass:     'wow',      // default
        animateClass: 'animated', // default
        offset:       0,          // default
        mobile:       true,       // default
        live:         true        // default
    }).init();
  }
}
</script>

• WOWJS高级选项

1. data-wow-duration: 更改动画持续时间
2. data-wow-delay: 动画开始前的延迟
3. data-wow-offset: 开始动画的距离（与浏览器底部相关）
4. data-wow-iteration: 动画重复的次数

<div class="wow animate__animated animate__fadeInDownBig" data-wow-duration="0.3s" data-wow-delay="0.5s"></div>
<div class="wow animate__animated animate__fadeInDownBig" data-wow-offset="2"  data-wow-iteration="3"></div>