震惊！原来css3动画也可以变得如此简单有趣！

一、前言

二、官网地址

1、官网演示地址：

一、前言

今天逛技术贴，发现个特别有意思的东西，wowjs，这是个什么玩意呢？查了查资料才知道，原来是个做动画的，把动画给封装了一下，使我们用起来更加方便简单。如果你想，你可以把你的网页做成PPT一样绚丽。这篇博客记录一下怎么使用这个玩意，我们要在vue项目中如何使用呢？别急，慢慢看下去。看完你会发现真的特别有意思，简单又好用。本篇博客主要记录一下再vue中如何使用，如果想知道在HTML中如何使用，可参考另一篇博客：https://blog.csdn.net/Wjhsmart/article/details/107542311

二、官网地址

1、官网演示地址：

通过以下地址可以访问逛网，可以看到各种效果的演示效果：https://www.delac.io/wow/index.html#pricing

2、效果演示地址：

知道了怎么回事，肯定要知道每个效果的代码是什么呀，通过以下地址即可以获取到每个效果的代码：https://animate.style/

三、开始使用

1、安装

在自己的项目中执行以下命令安装wowjs模块。

npm install wowjs

2、引用

找到 main.js 引入相关的css

/* animate.css */
import 'animate.css'

3、使用

安装好了，并且把css引入进项目中，就可以使用了。在需要使用的页面中引入wowjs。

<script>
import { WOW } from 'wowjs'

...

mounted() {
    var wow = new WOW(); wow.init(); // 初始化wowjs }, ... </script>

引入并初始化好了之后，在需要使用动画的标签上使用：关键是（wow bounceInUp）

<div class="wow bounceInUp">
    中间出现的动画
</div>

如果想切换成别的动画，只需要把 bounceInUp 换调即可

4、高级用法

如果简单的动画满足不了你的需求，还有更高级的用法，如：

<!--动画持续时间为2秒, 动画开始之前的延迟播放的时间为5s 元素底部距离浏览器底部400像素时开始播放动画, 动画重复次数为2次-->
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="400" data-wow-iteration="2">从左边滑入的动画</p>

各属性说明：

data-wow-duration: 动画持续时间
data-wow-delay: 动画开始之前的延迟播放的时间
data-wow-offset: 元素距离底部大于此数值时,开始播放动画
data-wow-iteration: 动画重复的次数

也可以在初始化的时候定义好这些属性，如：

    var wow = new WOW(
      {
        boxClass: 'wow',      // 默认属性名 animateClass: 'animated', // 默认触发的动画类(包含在animate css中) offset: 0, // 为所有添加wow的元素设置 data-wow-delay属性 的默认值 mobile: true, // 是否在移动设备中开启动画 live: true } ); wow.init();

四、结尾

是不是特别简单？小伙伴们有没有学会？学会了的小伙伴们不妨给博主点个赞吧！如果还没有学会的小伙伴，可以再看一遍(手动捂脸)。

想看博主更多精彩好文，可以移步：http://wjhsmart.vip。自己建站的小伙伴也可以给博主留言，留下你的小站名称及地址，我们可以互联。